/* ============================================
   Customer Service Portal Styles
   ============================================ */

/* Portal accent color */
:root {
    --cs-accent: #0ea5e9;
    --cs-accent-light: #38bdf8;
    --cs-accent-dark: #0284c7;
    --cs-accent-bg: rgba(14, 165, 233, 0.1);
}

/* Logo styling is handled by shared .nav-logo in app.css */

/* ============================================
   Dashboard Styles
   ============================================ */

.cs-dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-lg);
    gap: var(--space-lg);
    overflow-y: auto;
}

/* Dashboard Loading State */
.cs-db-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--color-text-secondary);
}

.cs-db-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border);
    border-top-color: var(--cs-accent);
    border-radius: 50%;
    animation: cs-spin 1s linear infinite;
}

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

/* Spin animation for refresh button */
.spin {
    animation: cs-spin 1s linear infinite;
}

/* Dashboard Toolbar */
.cs-db-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.cs-db-toolbar-left,
.cs-db-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cs-db-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cs-db-title i {
    color: var(--cs-accent);
}

/* ============================================
   Statistics Cards
   ============================================ */

.cs-db-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md);
    flex-shrink: 0;
}

.cs-db-stat-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cs-db-stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--cs-accent);
}

.cs-db-stat-card-alert {
    border-color: var(--color-warning);
    background: rgba(245, 158, 11, 0.05);
}

.cs-db-stat-card-danger {
    border-color: var(--color-danger);
    background: rgba(239, 68, 68, 0.05);
}

.cs-db-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.cs-db-stat-icon-primary {
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
}

.cs-db-stat-icon-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.cs-db-stat-icon-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.cs-db-stat-icon-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.cs-db-stat-content {
    flex: 1;
    min-width: 0;
}

.cs-db-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

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

.cs-db-stat-arrow {
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease;
}

.cs-db-stat-card:hover .cs-db-stat-arrow {
    transform: translateX(4px);
    color: var(--cs-accent);
}

/* ============================================
   Content Grid
   ============================================ */

.cs-db-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

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

/* Secondary Row */
.cs-db-secondary-row {
    display: flex;
    gap: var(--space-md);
}

.cs-db-panel-wide {
    flex: 1;
}

/* ============================================
   Panels
   ============================================ */

.cs-db-panel {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cs-db-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}

.cs-db-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cs-db-panel-title i {
    color: var(--cs-accent);
}

.cs-db-panel-link {
    font-size: 0.875rem;
    color: var(--cs-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cs-db-panel-link:hover {
    text-decoration: underline;
    color: var(--cs-accent-dark);
}

.cs-db-panel-body {
    padding: var(--space-md);
    flex: 1;
    overflow-y: auto;
}

/* ============================================
   Activity List
   ============================================ */

.cs-db-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-db-activity-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-db-activity-item:hover {
    background: var(--color-bg-secondary);
}

.cs-db-activity-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.cs-db-activity-content {
    flex: 1;
    min-width: 0;
}

.cs-db-activity-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-db-activity-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 0.125rem;
}

.cs-db-activity-number {
    font-family: var(--font-mono);
}

.cs-db-activity-state {
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cs-db-activity-date {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

/* ============================================
   State Colors
   ============================================ */

.state-new {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.state-scheduled {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.state-inprogress {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.state-onhold {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.state-completed {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.state-cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ============================================
   Address List
   ============================================ */

.cs-db-address-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-db-address-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-db-address-item:hover {
    background: var(--color-bg-secondary);
}

.cs-db-address-content {
    flex: 1;
    min-width: 0;
}

.cs-db-address-street {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.cs-db-address-city {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cs-db-address-overdue {
    text-align: right;
}

.cs-db-days-overdue {
    font-size: 0.75rem;
    color: var(--color-danger);
    font-weight: 500;
}

.cs-db-address-date {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

/* ============================================
   Client Grid
   ============================================ */

.cs-db-client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}

.cs-db-client-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
    border: 1px solid var(--color-border);
}

.cs-db-client-card:hover {
    background: var(--color-bg-secondary);
    border-color: var(--cs-accent);
}

.cs-db-client-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cs-db-client-info {
    flex: 1;
    min-width: 0;
}

.cs-db-client-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-db-client-code {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
}

/* ============================================
   Empty State
   ============================================ */

.cs-db-empty {
    text-align: center;
    padding: var(--space-lg);
    color: var(--color-text-tertiary);
}

.cs-db-empty i {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
    opacity: 0.5;
}

.cs-db-empty p {
    margin: 0;
    font-size: 0.875rem;
}

.cs-db-empty-success {
    color: var(--cs-accent);
}

.cs-db-empty-success i {
    opacity: 0.8;
}

/* ============================================
   Quick Actions
   ============================================ */

.cs-db-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.cs-db-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--color-text-primary);
}

.cs-db-quick-action:hover {
    background: var(--cs-accent-bg);
    border-color: var(--cs-accent);
    color: var(--cs-accent);
}

.cs-db-quick-action i {
    font-size: 1.5rem;
}

.cs-db-quick-action span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .cs-dashboard {
        padding: var(--space-md);
    }

    .cs-db-toolbar {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: stretch;
    }

    .cs-db-toolbar-left,
    .cs-db-toolbar-right {
        justify-content: center;
    }

    .cs-db-title {
        font-size: 1.25rem;
        justify-content: center;
    }

    .cs-db-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-db-stat-value {
        font-size: 1.5rem;
    }

    .cs-db-secondary-row {
        flex-direction: column;
    }

    .cs-db-client-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cs-db-stats-grid {
        grid-template-columns: 1fr;
    }

    .cs-db-quick-actions {
        grid-template-columns: 1fr;
    }

    .cs-db-client-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Widget Components
   ============================================ */

.cs-widget {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cs-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}

.cs-widget-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cs-widget-title i {
    color: var(--cs-accent);
}

.cs-widget-link {
    font-size: 0.875rem;
    color: var(--cs-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cs-widget-link:hover {
    text-decoration: underline;
    color: var(--cs-accent-dark);
}

.cs-widget-body {
    padding: var(--space-md);
    flex: 1;
    overflow-y: auto;
}

.cs-widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.cs-widget-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--cs-accent);
    border-radius: 50%;
    animation: cs-spin 1s linear infinite;
}

.cs-widget-empty {
    text-align: center;
    padding: var(--space-lg);
    color: var(--color-text-tertiary);
}

.cs-widget-empty i {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
    opacity: 0.5;
}

.cs-widget-empty p {
    margin: 0;
    font-size: 0.875rem;
}

.cs-widget-empty-success {
    color: var(--cs-accent);
}

.cs-widget-empty-success i {
    opacity: 0.8;
}

/* ============================================
   Stats Card Widget
   ============================================ */

.cs-stats-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cs-stats-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--cs-accent);
}

.cs-stats-card-alert-warning {
    border-color: var(--color-warning);
    background: rgba(245, 158, 11, 0.05);
}

.cs-stats-card-alert-danger {
    border-color: var(--color-danger);
    background: rgba(239, 68, 68, 0.05);
}

.cs-stats-card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.cs-stats-icon-primary {
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
}

.cs-stats-icon-success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.cs-stats-icon-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.cs-stats-icon-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.cs-stats-icon-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.cs-stats-card-content {
    flex: 1;
    min-width: 0;
}

.cs-stats-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.cs-stats-card-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.cs-stats-card-sublabel {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 0.125rem;
}

.cs-stats-card-trend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.cs-trend-up {
    color: #10b981;
}

.cs-trend-down {
    color: #ef4444;
}

.cs-trend-neutral {
    color: var(--color-text-tertiary);
}

.cs-stats-card-arrow {
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease;
}

.cs-stats-card:hover .cs-stats-card-arrow {
    transform: translateX(4px);
    color: var(--cs-accent);
}

/* ============================================
   Case List Widget
   ============================================ */

.cs-case-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-case-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-case-item:hover {
    background: var(--color-bg-secondary);
}

.cs-case-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cs-case-content {
    flex: 1;
    min-width: 0;
}

.cs-case-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-case-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 0.125rem;
}

.cs-case-number {
    font-family: var(--font-mono);
}

.cs-case-badge {
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cs-case-date {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

/* ============================================
   Address List Widget
   ============================================ */

.cs-address-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-address-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-address-item:hover {
    background: var(--color-bg-secondary);
}

.cs-address-content {
    flex: 1;
    min-width: 0;
}

.cs-address-street {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.cs-address-city {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cs-address-meta {
    text-align: right;
    flex-shrink: 0;
}

.cs-days-overdue {
    font-size: 0.75rem;
    color: var(--color-danger);
    font-weight: 500;
}

.cs-next-service {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.cs-status {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

.status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

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

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

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

/* ============================================
   Quick Actions Widget
   ============================================ */

.cs-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.cs-quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--color-text-primary);
}

.cs-quick-action-btn:hover {
    background: var(--cs-accent-bg);
    border-color: var(--cs-accent);
    color: var(--cs-accent);
}

.cs-quick-action-btn i {
    font-size: 1.5rem;
}

.cs-quick-action-btn span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ============================================
   Client Grid Widget
   ============================================ */

.cs-client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}

.cs-client-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
    border: 1px solid var(--color-border);
}

.cs-client-card:hover {
    background: var(--color-bg-secondary);
    border-color: var(--cs-accent);
}

.cs-client-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    overflow: hidden;
}

.cs-client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.cs-client-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-client-code {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
}

.cs-client-meta {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
}

.cs-client-meta i {
    font-size: 0.625rem;
}

@media (max-width: 768px) {
    .cs-quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-client-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cs-quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .cs-client-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Page Components
   ============================================ */

.cs-addresses-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    gap: var(--space-md);
    overflow-y: auto;
    max-width: 1600px;
    margin: 0 auto;
}

.cs-page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--color-text-secondary);
}

.cs-page-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border);
    border-top-color: var(--cs-accent);
    border-radius: 50%;
    animation: cs-spin 1s linear infinite;
}

/* Legacy Page Header */
.cs-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.cs-page-header-left {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
}

.cs-page-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cs-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cs-page-title i {
    color: var(--cs-accent);
}

.cs-page-count {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
}

/* ============================================
   Hero Header Design
   ============================================ */
.cs-hero-header {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.cs-hero-background {
    position: absolute;
    inset: 0;
    background: var(--bg-surface-hover);
}

.cs-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.03;
}

.cs-hero-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
    color: var(--text-primary);
}

.cs-hero-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cs-hero-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-bg-light);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.cs-hero-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-hero-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.cs-hero-subtitle {
    font-size: 14px;
    margin: 0;
    color: var(--text-secondary);
    font-weight: 400;
}

.cs-hero-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.cs-hero-stats {
    display: flex;
    gap: 24px;
}

.cs-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    min-width: 80px;
}

.cs-hero-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.cs-hero-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.cs-hero-stat-success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.cs-hero-stat-danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    animation: pulse-danger 2s ease-in-out infinite;
}

@keyframes pulse-danger {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.cs-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-hero-actions .tk-btn-ghost {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.cs-hero-actions .tk-btn-ghost:hover {
    background: var(--bg-surface);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

.cs-hero-actions .tk-btn-primary {
    background: var(--primary-color);
    color: var(--primary-text-on-dark);
    border-color: var(--primary-color);
    font-weight: 600;
}

.cs-hero-actions .tk-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.tk-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Activities Hero Variant - removed, now uses same theme-aware styles as default */

.cs-hero-stat-info {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

/* Responsive Hero Header */
@media (max-width: 768px) {
    .cs-hero-content {
        flex-direction: column;
        gap: 24px;
        padding: 24px;
    }

    .cs-hero-left {
        flex-direction: column;
        text-align: center;
    }

    .cs-hero-right {
        flex-direction: column;
        width: 100%;
    }

    .cs-hero-stats {
        justify-content: center;
    }

    .cs-hero-actions {
        width: 100%;
        justify-content: center;
    }

    .cs-hero-title {
        font-size: 24px;
    }

    .cs-hero-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}

/* Filter Tabs */
.cs-filter-tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-xs);
    flex-shrink: 0;
    overflow-x: auto;
}

.cs-filter-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.cs-filter-tab:hover {
    color: var(--color-text-primary);
}

.cs-filter-tab.active {
    color: var(--cs-accent);
    border-bottom-color: var(--cs-accent);
}

.cs-tab-count {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    color: var(--color-text-tertiary);
}

.cs-filter-tab.active .cs-tab-count {
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
}

.cs-tab-count-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

.cs-tab-count-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
}

/* Missing Details Badge */
.cs-status-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-missing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    font-size: 0.75rem;
    cursor: help;
}

.cs-missing-badge:hover {
    background: rgba(245, 158, 11, 0.25);
}

/* Missing Details Banner (for detail pages) */
.cs-missing-details-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.cs-missing-details-banner i {
    color: #f59e0b;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.cs-missing-details-content {
    flex: 1;
    min-width: 0;
}

.cs-missing-details-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.cs-missing-details-list {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.cs-missing-details-banner .tk-btn {
    flex-shrink: 0;
}

/* Search Bar */
.cs-search-bar {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cs-search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.cs-search-input-wrapper i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
}

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

.cs-search-input:focus {
    outline: none;
    border-color: var(--cs-accent);
}

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

.cs-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-search-clear:hover {
    color: var(--color-text-primary);
}

.cs-search-filters {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.cs-filter-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
}

.cs-filter-select:focus {
    outline: none;
    border-color: var(--cs-accent);
}

/* Empty State */
.cs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-text-tertiary);
    flex: 1;
}

.cs-empty-state i {
    font-size: 4rem;
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.cs-empty-state h3 {
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text-primary);
}

.cs-empty-state p {
    margin: 0 0 var(--space-lg) 0;
    max-width: 400px;
}

/* Address Table */
.cs-address-table-wrapper {
    flex: 1;
    overflow-x: auto;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.cs-address-table {
    width: 100%;
    border-collapse: collapse;
}

.cs-address-table thead {
    position: sticky;
    top: 0;
    background: var(--color-bg-secondary);
    z-index: 1;
}

.cs-address-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.cs-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: color 0.15s ease;
}

.cs-sort-btn:hover,
.cs-sort-btn.active {
    color: var(--cs-accent);
}

.cs-sort-btn i {
    font-size: 0.625rem;
}

.cs-address-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-address-row:hover {
    background: var(--color-bg-secondary);
}

.cs-address-row.cs-row-overdue {
    background: rgba(239, 68, 68, 0.03);
}

.cs-address-row.cs-row-overdue:hover {
    background: rgba(239, 68, 68, 0.08);
}

.cs-address-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.cs-address-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cs-address-street2 {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cs-client-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.cs-zone-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.cs-status-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cs-service-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cs-service-date {
    font-size: 0.875rem;
}

.cs-service-days {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.cs-service-days.cs-overdue {
    color: #ef4444;
    font-weight: 500;
}

.cs-no-service {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    font-style: italic;
}

.cs-action-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--color-text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.cs-action-btn:hover {
    color: var(--cs-accent);
}

/* Status classes for removed state */
.status-removed {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Pagination */
.cs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
    flex-shrink: 0;
}

.cs-pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-pagination-btn:hover:not(:disabled) {
    border-color: var(--cs-accent);
    color: var(--cs-accent);
}

.cs-pagination-btn.active {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: white;
}

.cs-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cs-pagination-ellipsis {
    padding: 0 0.5rem;
    color: var(--color-text-tertiary);
}

/* Responsive */
@media (max-width: 1024px) {
    .cs-th-zone,
    .cs-td-zone {
        display: none;
    }
}

@media (max-width: 768px) {
    .cs-addresses-page {
        padding: var(--space-md);
    }

    .cs-page-header {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: stretch;
    }

    .cs-page-header-left,
    .cs-page-header-right {
        justify-content: center;
    }

    .cs-search-bar {
        flex-direction: column;
    }

    .cs-search-input-wrapper {
        max-width: 100%;
    }

    .cs-search-filters {
        width: 100%;
        flex-wrap: wrap;
    }

    .cs-filter-select {
        flex: 1;
        min-width: 120px;
    }

    .cs-th-client,
    .cs-td-client,
    .cs-th-service,
    .cs-td-service {
        display: none;
    }
}

@media (max-width: 480px) {
    .cs-filter-tabs {
        gap: 0;
    }

    .cs-filter-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .cs-tab-count {
        display: none;
    }
}

/* ============================================
   Address Details Page
   ============================================ */

.cs-address-details-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.cs-page-loading,
.cs-page-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--color-text-secondary);
}

.cs-page-error i {
    font-size: 4rem;
    color: var(--color-warning);
    opacity: 0.5;
}

.cs-page-error h3 {
    margin: 0;
    color: var(--color-text-primary);
}

.cs-page-error p {
    margin: 0;
}

.cs-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border);
    border-top-color: var(--cs-accent);
    border-radius: 50%;
    animation: cs-spin 1s linear infinite;
}

/* Details Header */
.cs-details-header {
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) var(--space-lg);
    flex-shrink: 0;
}

.cs-header-top {
    margin-bottom: var(--space-md);
}

.cs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.cs-breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cs-breadcrumb a:hover {
    color: var(--cs-accent);
}

.cs-breadcrumb i {
    font-size: 0.625rem;
    color: var(--color-text-tertiary);
}

.cs-breadcrumb span {
    color: var(--color-text-primary);
    font-weight: 500;
}

.cs-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
}

.cs-header-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

.cs-address-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.cs-address-title {
    flex: 1;
    min-width: 0;
}

.cs-address-title h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-address-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.cs-address-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.cs-badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

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

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

.cs-badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.cs-badge-client {
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
}

.cs-badge-zone {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.cs-badge-primary {
    background: var(--cs-accent);
    color: white;
}

.cs-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Button Styles */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

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

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

.cs-btn-secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.cs-btn-secondary:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--cs-accent);
}

.cs-btn-icon {
    padding: 0.5rem;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.cs-btn-icon:hover {
    color: var(--cs-accent);
    border-color: var(--cs-accent);
}

.cs-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Dropdown */
.cs-dropdown {
    position: relative;
}

.cs-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
}

.cs-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.cs-dropdown-item:hover {
    background: var(--color-bg-secondary);
}

.cs-dropdown-item-warning {
    color: var(--color-warning);
}

.cs-dropdown-divider {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

/* Details Content */
.cs-details-content {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    flex: 1;
    overflow: hidden;
}

.cs-details-main {
    flex: 7;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cs-details-sidebar {
    flex: 3;
    min-width: 280px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    overflow-y: auto;
}

/* Tab Container */
.cs-tab-container {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.cs-tab-nav {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    flex-shrink: 0;
    overflow-x: auto;
}

.cs-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

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

.cs-tab-btn.active {
    color: var(--cs-accent);
    border-bottom-color: var(--cs-accent);
    background: var(--color-bg-primary);
}

.cs-tab-btn i {
    font-size: 1rem;
}

.cs-tab-content {
    flex: 1;
    overflow-y: auto;
}

.cs-tab-panel {
    padding: var(--space-md);
}

.cs-panel-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.cs-toolbar-filters {
    display: flex;
    gap: var(--space-sm);
}

.cs-toolbar-search {
    position: relative;
    flex: 1;
    max-width: 300px;
}

.cs-toolbar-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
}

.cs-toolbar-search input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.cs-toolbar-search input:focus {
    outline: none;
    border-color: var(--cs-accent);
}

.cs-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
}

.cs-select:focus {
    outline: none;
    border-color: var(--cs-accent);
}

/* Empty State - Small */
.cs-empty-state-sm {
    padding: var(--space-lg);
}

.cs-empty-state-sm i {
    font-size: 2.5rem;
}

/* Contact List */
.cs-contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-contact-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.cs-contact-card:hover {
    border-color: var(--cs-accent);
}

.cs-contact-primary {
    border-color: var(--cs-accent);
    background: var(--cs-accent-bg);
}

.cs-contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

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

.cs-contact-name {
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-contact-title {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-top: 0.125rem;
}

.cs-contact-details {
    display: flex;
    gap: var(--space-md);
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.cs-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cs-contact-link:hover {
    color: var(--cs-accent);
}

.cs-contact-link i {
    font-size: 0.875rem;
}

.cs-contact-actions {
    display: flex;
    gap: 0.25rem;
}

/* Notes Section */
.cs-notes-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.cs-notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.cs-notes-header h4 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-notes-header h4 i {
    color: var(--cs-accent);
}

.cs-notes-content {
    padding: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
}

.cs-notes-warning {
    border-color: var(--color-warning);
    background: rgba(245, 158, 11, 0.05);
}

.cs-notes-warning .cs-notes-header h4 i {
    color: var(--color-warning);
}

/* History Timeline */
.cs-history-timeline {
    position: relative;
    padding-left: 1.5rem;
}

.cs-history-timeline::before {
    content: '';
    position: absolute;
    left: 0.375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--color-border);
}

.cs-history-item {
    position: relative;
    padding-bottom: var(--space-md);
}

.cs-history-marker {
    position: absolute;
    left: -1.125rem;
    top: 0.25rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-bg-primary);
    border: 2px solid var(--cs-accent);
}

.cs-history-content {
    padding-left: 0.5rem;
}

.cs-history-date {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-bottom: 0.25rem;
}

.cs-history-text {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

/* ============================================
   Activity Timeline Component
   ============================================ */

.cs-case-timeline {
    position: relative;
    padding-left: 2rem;
}

.cs-timeline-empty {
    text-align: center;
    padding: var(--space-lg);
    color: var(--color-text-tertiary);
}

.cs-timeline-empty i {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
    opacity: 0.5;
}

.cs-timeline-item {
    position: relative;
    padding-bottom: var(--space-lg);
}

.cs-timeline-item:last-child {
    padding-bottom: 0;
}

.cs-timeline-item:last-child .cs-timeline-connector {
    display: none;
}

.cs-timeline-marker {
    position: absolute;
    left: -2rem;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 1;
}

.cs-timeline-connector {
    position: absolute;
    left: calc(-2rem + 13px);
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

/* Marker Colors */
.cs-marker-service {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 2px solid #3b82f6;
}

.cs-marker-complaint {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 2px solid #ef4444;
}

.cs-marker-inspection {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border: 2px solid #8b5cf6;
}

.cs-marker-followup {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 2px solid #f59e0b;
}

.cs-marker-inquiry {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 2px solid #10b981;
}

.cs-marker-emergency {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 2px solid #ef4444;
}

.cs-marker-default {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border);
}

.cs-timeline-content {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-timeline-content:hover {
    border-color: var(--cs-accent);
    box-shadow: var(--shadow-sm);
}

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

.cs-timeline-type {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.cs-timeline-date {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.cs-timeline-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.cs-timeline-description {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.cs-timeline-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
}

.cs-timeline-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.cs-status-open {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.cs-status-inprogress {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.cs-status-completed {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

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

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

.cs-timeline-priority {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cs-priority-critical {
    color: #ef4444;
}

.cs-priority-high {
    color: #f59e0b;
}

.cs-priority-medium {
    color: var(--color-text-secondary);
}

.cs-priority-low {
    color: var(--color-text-tertiary);
}

.cs-timeline-assignee,
.cs-timeline-due {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-secondary);
}

.cs-timeline-due.cs-overdue {
    color: #ef4444;
    font-weight: 500;
}

.cs-timeline-overdue .cs-timeline-content {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.03);
}

.cs-timeline-completed .cs-timeline-content {
    opacity: 0.7;
}

.cs-timeline-compact .cs-timeline-content {
    padding: var(--space-sm);
}

.cs-timeline-compact .cs-timeline-description {
    display: none;
}

/* ============================================
   Sidebar Panels
   ============================================ */

.cs-sidebar-panel {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cs-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.cs-panel-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-panel-title i {
    color: var(--cs-accent);
}

.cs-panel-body {
    padding: var(--space-md);
}

.cs-panel-empty {
    text-align: center;
    padding: var(--space-md);
    color: var(--color-text-tertiary);
}

.cs-panel-empty i {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
    opacity: 0.5;
}

.cs-panel-empty p {
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.875rem;
}

/* Contact Panel */
.cs-contact-display {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-contact-display:hover {
    background: var(--color-bg-secondary);
}

.cs-contact-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    position: relative;
}

.cs-avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: var(--cs-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    border: 2px solid var(--color-bg-primary);
}

.cs-contact-main {
    flex: 1;
    min-width: 0;
}

.cs-contact-main .cs-contact-name {
    font-size: 1rem;
}

.cs-contact-main .cs-contact-title {
    font-size: 0.8125rem;
}

.cs-contact-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: var(--space-md);
}

.cs-contact-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.cs-contact-action:hover {
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
}

.cs-contact-action i {
    font-size: 1rem;
    color: var(--cs-accent);
}

.cs-contact-action span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-contact-notes {
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Address Info Panel */
.cs-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.cs-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cs-info-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
}

.cs-info-value {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cs-info-address {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
}

.cs-info-badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.cs-info-mono {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.cs-info-highlight {
    background: var(--cs-accent-bg);
    padding: var(--space-sm);
    margin: 0 calc(-1 * var(--space-md));
    border-radius: 0;
    border-bottom: none;
}

.cs-info-highlight .cs-info-label {
    color: var(--cs-accent);
}

.cs-info-highlight .cs-info-label i {
    margin-right: 0.25rem;
}

.cs-tree-types {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cs-map-link {
    color: var(--cs-accent);
    transition: color 0.15s ease;
}

.cs-map-link:hover {
    color: var(--cs-accent-dark);
}

.cs-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cs-tag {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
}

.cs-info-meta {
    opacity: 0.8;
}

.cs-info-by {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

/* Quick Stats Panel */
.cs-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.cs-stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--space-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.cs-stat-highlight {
    background: rgba(245, 158, 11, 0.1);
}

.cs-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cs-stat-icon-primary {
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
}

.cs-stat-icon-success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.cs-stat-icon-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.cs-stat-icon-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.cs-stat-content {
    display: flex;
    flex-direction: column;
}

.cs-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.cs-stat-label {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    margin-top: 0.125rem;
}

/* Service Dates Section */
.cs-service-dates {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.cs-service-dates-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin: 0 0 var(--space-sm) 0;
}

.cs-date-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--space-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xs);
}

.cs-date-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-date-label i {
    color: var(--cs-accent);
}

.cs-date-value {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cs-date-value small {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.cs-date-warning {
    color: var(--color-warning);
}

.cs-date-overdue .cs-date-value {
    color: #ef4444;
}

.cs-overdue-badge {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
}

.cs-no-date {
    font-style: italic;
    color: var(--color-text-tertiary);
}

/* Status Indicator */
.cs-status-indicator {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
}

.cs-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
}

.cs-status-row .cs-status-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cs-status-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
}

.cs-status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

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

.cs-status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.cs-status-removed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

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

.cs-status-warning .cs-status-label {
    color: var(--color-warning);
}

.cs-status-warning .cs-status-label i {
    color: var(--color-warning);
}

/* Responsive - Address Details */
@media (max-width: 1200px) {
    .cs-details-content {
        flex-direction: column;
    }

    .cs-details-sidebar {
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cs-sidebar-panel {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .cs-details-header {
        padding: var(--space-md);
    }

    .cs-header-main {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }

    .cs-header-info {
        flex-direction: column;
        text-align: center;
    }

    .cs-address-badges {
        justify-content: center;
    }

    .cs-header-actions {
        justify-content: center;
    }

    .cs-details-content {
        padding: var(--space-md);
    }

    .cs-details-sidebar {
        flex-direction: column;
    }

    .cs-sidebar-panel {
        min-width: 100%;
    }

    .cs-tab-nav {
        overflow-x: auto;
    }

    .cs-tab-btn {
        padding: 0.75rem 1rem;
    }

    .cs-panel-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-toolbar-filters {
        flex-wrap: wrap;
    }

    .cs-toolbar-search {
        max-width: 100%;
    }
}

/* ============================================
   NEW DASHBOARD PAGE STYLES
   ============================================ */

.cs-dashboard-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.cs-dashboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--text-secondary);
}

.cs-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.cs-dashboard-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-dashboard-title i {
    font-size: 28px;
    color: var(--cs-accent);
}

.cs-dashboard-title h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cs-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* View Toggle */
.cs-view-toggle {
    display: flex;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.cs-view-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cs-view-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

.cs-view-btn.active {
    color: var(--cs-accent);
    background: var(--cs-accent-bg);
}

/* Stats Bar */
.cs-stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
}

.cs-stats-bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cs-stats-bar-item:hover {
    background: var(--bg-surface-hover);
}

.cs-stats-bar-item i {
    font-size: 18px;
    color: var(--cs-accent);
}

.cs-stats-bar-item--warning i {
    color: var(--color-warning);
}

.cs-stats-bar-item--danger i {
    color: var(--color-danger);
}

.cs-stats-bar-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.cs-stats-bar-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.cs-stats-bar-divider {
    width: 1px;
    height: 32px;
    background: var(--border-color);
    margin: 0 8px;
    flex-shrink: 0;
}

/* Dashboard Grid */
.cs-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

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

.cs-dashboard-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Widget Base */
.cs-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cs-widget--full {
    margin-bottom: 24px;
}

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

.cs-widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.cs-widget-title i {
    font-size: 18px;
    color: var(--cs-accent);
}

.cs-widget-action {
    font-size: 13px;
    color: var(--cs-accent);
    text-decoration: none;
    font-weight: 500;
}

.cs-widget-action:hover {
    text-decoration: underline;
}

.cs-widget-content {
    padding: 16px 20px;
}

.cs-widget-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}

.cs-widget-empty i {
    font-size: 36px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    opacity: 0.5;
}

.cs-widget-empty p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.cs-widget-empty-success i {
    color: var(--color-success);
}

.cs-widget-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface-hover);
    text-align: center;
}

.cs-widget-footer a {
    font-size: 13px;
    color: var(--cs-accent);
    text-decoration: none;
    font-weight: 500;
}

.cs-widget-footer a:hover {
    text-decoration: underline;
}

.cs-widget-loading {
    display: flex;
    justify-content: center;
    padding: 32px;
}

.cs-widget-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--cs-accent);
    border-radius: 50%;
    animation: cs-spin 1s linear infinite;
}

/* My Work Widget */
.cs-work-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cs-work-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-work-item:hover {
    background: var(--bg-surface-hover);
}

.cs-work-item-indicator {
    width: 4px;
    height: 40px;
    border-radius: 2px;
    background: var(--border-color);
    flex-shrink: 0;
}

.cs-work-item--overdue .cs-work-item-indicator {
    background: var(--color-danger);
}

.cs-work-item--warning .cs-work-item-indicator {
    background: var(--color-warning);
}

.cs-work-item--today .cs-work-item-indicator {
    background: var(--cs-accent);
}

.cs-work-item-content {
    flex: 1;
    min-width: 0;
}

.cs-work-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cs-work-item-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.cs-work-item-date {
    font-size: 12px;
    color: var(--text-tertiary);
}

.cs-work-item-date--overdue {
    color: var(--color-danger);
    font-weight: 600;
}

.cs-work-item-address {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-work-item-subject {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-work-item-arrow {
    color: var(--text-tertiary);
    font-size: 14px;
    flex-shrink: 0;
}

.cs-work-item:hover .cs-work-item-arrow {
    color: var(--cs-accent);
}

/* Alerts Widget */
.cs-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--bg-surface-hover);
    text-decoration: none;
    transition: all 0.2s ease;
}

.cs-alert-item:hover {
    box-shadow: var(--shadow-sm);
}

.cs-alert-item--danger {
    background: rgba(220, 38, 38, 0.1);
}

.cs-alert-item--warning {
    background: rgba(245, 158, 11, 0.1);
}

.cs-alert-item--info {
    background: rgba(59, 130, 246, 0.1);
}

.cs-alert-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
    flex-shrink: 0;
}

.cs-alert-item--danger .cs-alert-icon {
    background: rgba(220, 38, 38, 0.2);
    color: var(--color-danger);
}

.cs-alert-item--warning .cs-alert-icon {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
}

.cs-alert-item--info .cs-alert-icon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info);
}

.cs-alert-content {
    flex: 1;
    min-width: 0;
}

.cs-alert-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.cs-alert-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.cs-alert-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}

/* Activity Feed Widget */
.cs-case-feed {
    display: flex;
    flex-direction: column;
}

.cs-case-feed-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-case-feed-item:last-child {
    border-bottom: none;
}

.cs-case-feed-item:hover {
    background: var(--bg-surface-hover);
    margin: 0 -20px;
    padding: 10px 20px;
}

.cs-case-feed-time {
    flex-shrink: 0;
    width: 60px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: right;
}

.cs-case-feed-content {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.cs-case-feed-user {
    font-weight: 600;
    color: var(--text-primary);
}

.cs-case-feed-address {
    color: var(--cs-accent);
}

/* Clients Grid Widget */
.cs-clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.cs-client-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cs-client-card:hover {
    border-color: var(--cs-accent);
    box-shadow: var(--shadow-sm);
}

.cs-client-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-accent-bg);
    color: var(--cs-accent);
    border-radius: 8px;
    font-size: 18px;
    flex-shrink: 0;
}

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

.cs-client-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-client-stats {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.cs-client-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.cs-client-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.cs-client-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.cs-client-stat--highlight .cs-client-stat-value {
    color: var(--cs-accent);
}

/* Schedule Widget */
.cs-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-schedule-day {
    display: flex;
    gap: 16px;
}

.cs-schedule-date {
    flex-shrink: 0;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: var(--bg-surface-hover);
    border-radius: 8px;
}

.cs-schedule-date--today {
    background: var(--cs-accent-bg);
}

.cs-schedule-date-day {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.cs-schedule-date--today .cs-schedule-date-day {
    color: var(--cs-accent);
}

.cs-schedule-date-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.cs-schedule-date--today .cs-schedule-date-num {
    color: var(--cs-accent);
}

.cs-schedule-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-schedule-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-schedule-item:hover {
    border-color: var(--cs-accent);
}

.cs-schedule-item-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.cs-type--danger {
    color: var(--color-danger);
}

.cs-type--warning {
    color: var(--color-warning);
}

.cs-type--info {
    color: var(--color-info);
}

.cs-schedule-item-address {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-schedule-more {
    font-size: 12px;
    color: var(--text-tertiary);
    padding-left: 10px;
}

/* Quick Actions Bar */
.cs-quick-actions-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    flex-wrap: wrap;
}

.cs-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.cs-quick-action:hover {
    border-color: var(--cs-accent);
    background: var(--cs-accent-bg);
}

.cs-quick-action i {
    font-size: 24px;
    color: var(--cs-accent);
}

.cs-quick-action span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Responsive - Dashboard */
@media (max-width: 768px) {
    .cs-dashboard-page {
        padding: 16px;
    }

    .cs-dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-dashboard-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cs-stats-bar {
        padding: 8px 12px;
    }

    .cs-stats-bar-item {
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px;
        text-align: center;
    }

    .cs-stats-bar-label {
        font-size: 11px;
    }

    .cs-quick-actions-bar {
        padding: 16px;
        gap: 12px;
    }

    .cs-quick-action {
        padding: 12px 16px;
        min-width: 80px;
    }

    .cs-quick-action i {
        font-size: 20px;
    }

    .cs-quick-action span {
        font-size: 12px;
    }
}

/* ============================================
   ACTIVITIES PAGE
   ============================================ */

.cs-cases-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.cs-cases-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.cs-cases-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

/* Quick Filters */
.cs-quick-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cs-quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-quick-filter:hover {
    border-color: var(--cs-accent);
    color: var(--cs-accent);
}

.cs-quick-filter.active {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: white;
}

.cs-quick-filter-badge {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.cs-quick-filter:not(.active) .cs-quick-filter-badge {
    background: var(--color-bg-tertiary);
}

.cs-quick-filter.active .cs-quick-filter-badge {
    background: rgba(255,255,255,0.3);
}

.cs-quick-filter-badge.cs-badge-danger {
    background: var(--color-danger);
    color: white;
}

/* Activity Filters */
.cs-case-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 16px;
}

.cs-filters-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.cs-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 140px;
}

.cs-filter-group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.cs-filter-select,
.cs-filter-input {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 13px;
}

.cs-filter-select:focus,
.cs-filter-input:focus {
    outline: none;
    border-color: var(--cs-accent);
    box-shadow: 0 0 0 3px var(--cs-accent-bg);
}

.cs-search-group {
    flex: 2;
    min-width: 200px;
}

.cs-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cs-search-input-wrapper i {
    position: absolute;
    left: 12px;
    color: var(--color-text-tertiary);
}

.cs-search-input-wrapper .cs-filter-input {
    padding-left: 36px;
    padding-right: 36px;
    width: 100%;
}

.cs-search-clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-search-clear:hover {
    background: var(--color-bg-hover);
}

.cs-filter-actions {
    flex: 0 0 auto;
    min-width: auto;
}

/* Bulk Actions */
.cs-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--cs-accent-bg);
    border: 1px solid var(--cs-accent);
    border-radius: 8px;
    margin-bottom: 16px;
}

.cs-bulk-actions-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--cs-accent-dark);
}

.cs-bulk-clear {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--cs-accent);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.cs-bulk-clear:hover {
    background: var(--cs-accent-dark);
}

.cs-bulk-actions-buttons {
    display: flex;
    gap: 12px;
}

.cs-bulk-select {
    padding: 8px 12px;
    border: 1px solid var(--cs-accent);
    border-radius: 6px;
    background: white;
    color: var(--cs-accent-dark);
    font-size: 13px;
    min-width: 150px;
    cursor: pointer;
}

.cs-bulk-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--cs-accent-bg);
}

/* Activities Table Container */
.cs-cases-table-container {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.cs-cases-table {
    width: 100%;
    border-collapse: collapse;
}

.cs-cases-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.cs-cases-table th.cs-th-checkbox {
    width: 40px;
    text-align: center;
}

.cs-cases-table th.cs-th-ref {
    width: 110px;
}

.cs-cases-table th.cs-th-type {
    width: 130px;
}

.cs-cases-table th.cs-th-address {
    width: 180px;
}

.cs-cases-table th.cs-th-client {
    width: 100px;
}

.cs-cases-table th.cs-th-subject {
    min-width: 150px;
}

.cs-cases-table th.cs-th-priority {
    width: 90px;
}

.cs-cases-table th.cs-th-state {
    width: 100px;
}

.cs-cases-table th.cs-th-assigned {
    width: 120px;
}

.cs-cases-table th.cs-th-scheduled {
    width: 100px;
}

.cs-cases-table th.cs-th-created {
    width: 90px;
}

.cs-cases-table th.cs-th-actions {
    width: 80px;
}

.cs-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.cs-sort-btn:hover {
    color: var(--cs-accent);
}

.cs-sort-btn.active {
    color: var(--cs-accent);
}

.cs-sort-btn i {
    font-size: 10px;
    opacity: 0.5;
}

.cs-sort-btn.active i {
    opacity: 1;
}

.cs-cases-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    vertical-align: middle;
}

.cs-cases-table tr.cs-case-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-cases-table tr.cs-case-row:hover {
    background: var(--color-bg-hover);
}

.cs-cases-table tr.cs-case-row.selected {
    background: var(--cs-accent-bg);
}

.cs-cases-table tr.cs-case-row.cs-row-overdue {
    background: rgba(239, 68, 68, 0.05);
}

.cs-cases-table tr.cs-case-row.cs-row-overdue:hover {
    background: rgba(239, 68, 68, 0.1);
}

.cs-td-checkbox {
    text-align: center;
}

.cs-td-checkbox input[type="checkbox"] {
    cursor: pointer;
}

.cs-case-ref {
    font-weight: 600;
    color: var(--cs-accent);
}

.cs-case-address {
    color: var(--color-text-secondary);
    text-decoration: none;
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-case-address:hover {
    color: var(--cs-accent);
    text-decoration: underline;
}

.cs-case-subject {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.cs-no-data {
    color: var(--color-text-tertiary);
}

.cs-unassigned {
    color: var(--color-text-tertiary);
    font-style: italic;
}

.cs-relative-time {
    color: var(--color-text-secondary);
    font-size: 12px;
}

/* Type Icons */
.cs-type-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.cs-type-icon i {
    font-size: 14px;
}

.cs-type-assessment { color: #3b82f6; }
.cs-type-trimming { color: #22c55e; }
.cs-type-removal { color: #f97316; }
.cs-type-inspection { color: #06b6d4; }
.cs-type-emergency { color: #ef4444; }
.cs-type-complaint { color: #eab308; }
.cs-type-maintenance { color: #8b5cf6; }
.cs-type-inquiry { color: #6b7280; }
.cs-type-other { color: #9ca3af; }

/* Priority Badges */
.cs-priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.cs-priority-low {
    background: #dbeafe;
    color: #1e40af;
}

.cs-priority-medium {
    background: #fef3c7;
    color: #92400e;
}

.cs-priority-high {
    background: #fee2e2;
    color: #991b1b;
}

.cs-priority-urgent {
    background: #ef4444;
    color: white;
}

/* State Badges */
.cs-state-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.cs-state-new {
    background: #e0e7ff;
    color: #3730a3;
}

.cs-state-scheduled {
    background: #dbeafe;
    color: #1e40af;
}

.cs-state-inprogress {
    background: #d1fae5;
    color: #065f46;
}

.cs-state-onhold {
    background: #fef3c7;
    color: #92400e;
}

.cs-state-completed {
    background: #d1fae5;
    color: #047857;
}

.cs-state-cancelled {
    background: #f3f4f6;
    color: #6b7280;
}

.cs-overdue {
    color: #dc2626;
    font-weight: 600;
}

/* Action Buttons */
.cs-td-actions {
    text-align: right;
}

.cs-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.cs-action-btn:hover {
    background: var(--color-bg-hover);
    color: var(--cs-accent);
}

/* Pagination */
.cs-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.cs-pagination-info {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.cs-pagination-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
}

.cs-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-pagination-btn:hover:not(:disabled) {
    border-color: var(--cs-accent);
    color: var(--cs-accent);
}

.cs-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cs-pagination-btn.active {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: white;
}

.cs-pagination-ellipsis {
    padding: 8px 4px;
    color: var(--color-text-tertiary);
}

/* Responsive */
@media (max-width: 1200px) {
    .cs-cases-table-container {
        overflow-x: auto;
    }

    .cs-cases-table {
        min-width: 1100px;
    }
}

@media (max-width: 768px) {
    .cs-cases-page {
        padding: 16px;
    }

    .cs-cases-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .cs-quick-filters {
        flex-wrap: wrap;
    }

    .cs-filters-row {
        flex-direction: column;
    }

    .cs-filter-group {
        width: 100%;
    }

    .cs-bulk-actions {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .cs-bulk-actions-buttons {
        flex-wrap: wrap;
        width: 100%;
    }

    .cs-bulk-select {
        flex: 1;
        min-width: 120px;
    }

    .cs-pagination {
        flex-direction: column;
        gap: 12px;
    }
}

/* ============================================
   SELECTION BANNER (Activity Creation Mode)
   ============================================ */

.cs-selection-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--cs-accent-bg) 0%, rgba(16, 185, 129, 0.15) 100%);
    border: 1px solid var(--cs-accent);
    border-radius: 8px;
    margin-bottom: 16px;
}

.cs-selection-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cs-accent-dark);
}

.cs-selection-banner-content i {
    font-size: 20px;
    color: var(--cs-accent);
}

.cs-row-selectable {
    cursor: pointer;
    position: relative;
}

.cs-row-selectable::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cs-accent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cs-row-selectable:hover::before {
    opacity: 1;
}

.cs-row-selectable:hover {
    background: var(--cs-accent-bg) !important;
}

/* ============================================
   ADDRESS SEARCH PICKER
   ============================================ */

.cs-address-picker {
    position: relative;
    width: 100%;
}

.cs-address-picker-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cs-address-picker-icon {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    font-size: 14px;
    pointer-events: none;
}

.cs-address-picker-input {
    width: 100%;
    padding: 14px 44px 14px 44px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cs-address-picker-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cs-address-picker-input::placeholder {
    color: var(--text-tertiary);
}

.cs-address-picker-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.cs-address-picker-clear:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

.cs-address-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
}

.cs-address-picker-loading,
.cs-address-picker-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

.cs-address-picker-loading i {
    font-size: 16px;
}

.cs-address-picker-results-header {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    background: var(--bg-surface-hover);
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}

.cs-address-picker-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.cs-address-picker-item:last-child {
    border-bottom: none;
}

.cs-address-picker-item:hover {
    background: var(--bg-surface-hover);
}

.cs-address-picker-item-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cs-address-picker-item-primary i {
    color: var(--primary-color);
    font-size: 14px;
}

.cs-address-picker-zone {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
    border-radius: 4px;
}

.cs-address-picker-item-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    padding-left: 22px;
}

.cs-address-picker-client strong {
    color: var(--text-primary);
    font-weight: 600;
}

.cs-address-picker-no-client {
    color: var(--text-tertiary);
    font-style: italic;
}

.cs-address-picker-zip {
    margin-left: auto;
    color: var(--text-tertiary);
}

/* Selected Address Card */
.cs-address-picker-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.cs-address-picker-selected-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.cs-address-picker-selected-address,
.cs-address-picker-selected-client {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.cs-address-picker-selected-address {
    color: var(--text-primary);
    font-weight: 500;
}

.cs-address-picker-selected-address i {
    color: var(--primary-color);
}

.cs-address-picker-selected-client {
    color: var(--text-secondary);
}

.cs-address-picker-selected-client i {
    color: var(--text-tertiary);
}

.cs-address-picker-code {
    color: var(--text-tertiary);
}

/* ============================================
   ACTIVITY MODAL STEPS
   ============================================ */

.cs-modal-step {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-modal-step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.cs-modal-step-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
    font-size: 20px;
    flex-shrink: 0;
}

.cs-modal-step-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.cs-modal-step-title p {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.cs-modal-step-content {
    flex: 1;
    min-height: 200px;
}

.cs-modal-step-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.cs-modal-step-actions .tk-btn:only-child {
    margin-left: auto;
}

/* Address summary in type selection step */
.cs-modal-address-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-surface-hover);
    border-radius: 8px;
    margin-bottom: 16px;
}

.cs-modal-address-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.cs-modal-address-info i {
    color: var(--primary-color);
}

/* Activity type icon colors for step header */
.cs-modal-step-icon.cs-type-assessment { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.cs-modal-step-icon.cs-type-trimming { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.cs-modal-step-icon.cs-type-removal { background: rgba(249, 115, 22, 0.1); color: #f97316; }
.cs-modal-step-icon.cs-type-inspection { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.cs-modal-step-icon.cs-type-emergency { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.cs-modal-step-icon.cs-type-complaint { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.cs-modal-step-icon.cs-type-maintenance { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.cs-modal-step-icon.cs-type-inquiry { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
.cs-modal-step-icon.cs-type-other { background: rgba(156, 163, 175, 0.1); color: #9ca3af; }

@media (max-width: 640px) {
    .cs-address-picker-selected {
        flex-direction: column;
        align-items: flex-start;
    }

    .cs-address-picker-selected-content {
        width: 100%;
    }

    .cs-modal-step-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* =============================================
   Phase 5A-1: Detail Pages Additions
   ============================================= */

/* Activity Details Page */
.cs-case-details-page {
    padding: var(--space-lg);
    max-width: 1600px;
    margin: 0 auto;
}

/* Client Details Page */
.cs-client-details-page {
    padding: var(--space-lg);
    max-width: 1600px;
    margin: 0 auto;
}

/* Contact Details Page */
.cs-contact-details-page {
    padding: var(--space-lg);
    max-width: 1600px;
    margin: 0 auto;
}

/* Contacts List Page */
.cs-contacts-page {
    padding: var(--space-lg);
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* DNC Warning Banner */
.cs-dnc-banner {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-danger, #ef4444);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    color: var(--color-danger, #ef4444);
    font-weight: 500;
    font-size: 14px;
}

.cs-dnc-banner i {
    font-size: 18px;
}

.cs-dnc-reason {
    opacity: 0.9;
    font-weight: 400;
}

/* Info Grid for Detail Pages */
.cs-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: var(--space-md) 0;
}

.cs-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-info-item-full {
    grid-column: 1 / -1;
}

.cs-info-item-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-color);
}

.cs-info-item-compact:last-child {
    border-bottom: none;
}

.cs-info-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cs-info-value {
    font-size: 14px;
    color: var(--text-primary);
}

.cs-info-value.mono {
    font-family: var(--font-mono, monospace);
}

.cs-info-value a {
    color: var(--cs-accent, var(--primary-color));
    text-decoration: none;
}

.cs-info-value a:hover {
    text-decoration: underline;
}

.cs-info-clickable {
    cursor: pointer;
    padding: var(--space-xs);
    margin: calc(-1 * var(--space-xs));
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

.cs-info-clickable:hover {
    background: var(--bg-surface-hover);
}

.cs-info-link {
    color: var(--cs-accent, var(--primary-color)) !important;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.cs-info-link i {
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cs-info-clickable:hover .cs-info-link i {
    opacity: 1;
}

@media (max-width: 640px) {
    .cs-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Methods List (for sidebar) */
.cs-contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-contact-method {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.cs-contact-method-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 14px;
    flex-shrink: 0;
}

.cs-contact-method-info {
    flex: 1;
    min-width: 0;
}

.cs-contact-method-label {
    font-size: 11px;
    color: var(--text-tertiary);
}

.cs-contact-method-value {
    font-size: 13px;
    color: var(--text-primary);
}

.cs-contact-method-value a {
    color: var(--cs-accent, var(--primary-color));
    text-decoration: none;
}

.cs-contact-method-value a:hover {
    text-decoration: underline;
}

/* Contract Status Indicator */
.cs-contract-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

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

.cs-contract-dot.active { background: var(--color-success, #22c55e); }
.cs-contract-dot.expiring { background: var(--color-warning, #f59e0b); }
.cs-contract-dot.expired { background: var(--color-danger, #ef4444); }

.cs-contract-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-contract-dates {
    font-size: 13px;
    color: var(--text-primary);
}

.cs-contract-active { color: var(--color-success, #22c55e); }
.cs-contract-expiring { color: var(--color-warning, #f59e0b); }
.cs-contract-expiring-soon { color: var(--color-danger, #ef4444); }
.cs-contract-expired { color: var(--color-danger, #ef4444); }

/* Activity Type Icons Helper */
/* Activity Type Icons Reference:
   Assessment  → bi-clipboard-check
   Trimming    → bi-scissors
   Removal     → bi-tree (or bi-x-circle)
   Inspection  → bi-search
   Emergency   → bi-exclamation-triangle
   Complaint   → bi-chat-left-dots
   Maintenance → bi-wrench
   Inquiry     → bi-question-circle
   Other       → bi-three-dots
*/

.cs-case-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    background: var(--bg-surface);
    color: var(--text-secondary);
}

.cs-case-icon.cs-icon-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.cs-case-icon.cs-icon-warning {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.cs-case-icon.cs-icon-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.cs-case-icon.cs-icon-default {
    background: var(--bg-surface);
    color: var(--text-secondary);
}

/* Contact Details Specific */
.cs-contact-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--text-secondary);
    position: relative;
    flex-shrink: 0;
}

.cs-icon-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-warning, #f59e0b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid var(--bg-primary);
}

.cs-client-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Contacts Table */
.cs-contact-table-wrapper {
    overflow-x: auto;
    background: var(--bg-primary);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border-color);
}

.cs-contact-table {
    width: 100%;
    border-collapse: collapse;
}

.cs-contact-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
}

.cs-contact-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.cs-contact-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-contact-row:hover {
    background: var(--bg-surface-hover);
}

.cs-contact-row:last-child td {
    border-bottom: none;
}

.cs-contact-row.cs-row-dnc {
    background: rgba(239, 68, 68, 0.03);
}

.cs-contact-row.cs-row-dnc:hover {
    background: rgba(239, 68, 68, 0.06);
}

/* Contact Name Cell */
.cs-name-cell {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cs-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-secondary);
    position: relative;
    flex-shrink: 0;
}

.cs-primary-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-warning, #f59e0b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    border: 2px solid var(--bg-primary);
}

.cs-name-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cs-contact-name {
    font-weight: 500;
    color: var(--text-primary);
}

.cs-contact-title {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Role Badge */
.cs-role-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 4px);
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-surface);
    color: var(--text-secondary);
}

.cs-role-badge.role-primary { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.cs-role-badge.role-owner { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.cs-role-badge.role-emergency { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.cs-role-badge.role-default { background: var(--bg-surface); color: var(--text-secondary); }

/* DNC Badge */
.cs-dnc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    font-size: 10px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Status Cell */
.cs-status-cell {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* No Value Placeholder */
.cs-no-value {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Phone and Email Links */
.cs-phone-link,
.cs-email-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--cs-accent, var(--primary-color));
    text-decoration: none;
    font-size: 13px;
}

.cs-phone-link:hover,
.cs-email-link:hover {
    text-decoration: underline;
}

.cs-phone-link i,
.cs-email-link i {
    font-size: 12px;
    opacity: 0.7;
}

/* Danger Text */
.cs-danger-text {
    color: var(--color-danger, #ef4444) !important;
    font-weight: 500;
}

/* Contact Grid for Client Details */
.cs-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.cs-contact-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-md);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.cs-contact-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cs-contact-card.cs-contact-primary {
    border-color: var(--color-warning, #f59e0b);
}

.cs-contact-card .cs-contact-avatar {
    width: 48px;
    height: 48px;
    font-size: 24px;
    margin-bottom: var(--space-sm);
}

.cs-contact-card .cs-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cs-contact-card .cs-contact-name {
    font-weight: 600;
    font-size: 14px;
}

.cs-contact-card .cs-contact-link {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cs-contact-card .cs-contact-link:hover {
    color: var(--cs-accent, var(--primary-color));
}

.cs-contact-card .cs-dnc-warning {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    font-size: 10px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Address Card Large (for Contact Details) */
.cs-address-card-lg {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-lg);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.cs-address-card-lg:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cs-address-card-lg .cs-address-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cs-address-card-lg .cs-address-details {
    flex: 1;
}

.cs-address-card-lg .cs-address-street {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.cs-address-card-lg .cs-address-street2 {
    font-size: 14px;
    color: var(--text-secondary);
}

.cs-address-card-lg .cs-address-city {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.cs-address-card-lg .cs-address-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

.cs-address-card-lg .cs-address-arrow {
    color: var(--text-tertiary);
    font-size: 20px;
}

/* Address Link Card (sidebar) */
.cs-address-link-card {
    padding: var(--space-sm);
    background: var(--bg-surface-hover);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-address-link-card:hover {
    background: var(--bg-surface);
}

.cs-address-text {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
}

.cs-address-city-text {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.cs-client-badge-sm {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: var(--radius-xs, 3px);
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-surface);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    margin-right: var(--space-xs);
}

.cs-status-badge-sm {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: var(--radius-xs, 3px);
    font-size: 10px;
    font-weight: 500;
    margin-top: var(--space-xs);
}

/* Last Contact Summary (sidebar) */
.cs-last-contact-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-contact-date-display {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cs-contact-date-display .cs-date {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

.cs-contact-date-display .cs-days-ago {
    font-size: 12px;
    color: var(--text-secondary);
}

.cs-contact-outcome-display {
    margin-top: var(--space-xs);
}

.cs-outcome-badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: var(--radius-sm, 4px);
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* Contact Log Section */
.cs-contact-log-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.cs-last-contact h4,
.cs-log-contact-form h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.cs-last-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cs-contact-date,
.cs-contact-outcome {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 14px;
    color: var(--text-secondary);
}

.cs-contact-date i,
.cs-contact-outcome i {
    color: var(--text-tertiary);
}

.cs-section-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--space-md) 0;
}

.cs-log-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.cs-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

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

.cs-select {
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    font-size: 14px;
    color: var(--text-primary);
}

.cs-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.cs-textarea {
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    font-size: 14px;
    color: var(--text-primary);
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.cs-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Days Remaining Classes */
.cs-days-good { color: var(--color-success, #22c55e); }
.cs-days-warning { color: var(--color-warning, #f59e0b); }
.cs-days-danger { color: var(--color-danger, #ef4444); }

/* Contract Summary (sidebar) */
.cs-contract-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-contract-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.cs-contract-item .cs-label {
    color: var(--text-secondary);
}

.cs-contract-remaining {
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 6px);
    margin-top: var(--space-sm);
}

.cs-contract-days {
    font-size: 28px;
    font-weight: 700;
}

.cs-contract-days-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Activity Info Panel */
.cs-case-info-panel .cs-case-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-case-info-panel .cs-case-item {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-case-info-panel .cs-case-item:hover {
    background: var(--bg-surface-hover);
}

.cs-case-info-panel .cs-case-item.cs-case-overdue {
    background: rgba(239, 68, 68, 0.05);
}

.cs-case-info-panel .cs-case-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cs-case-info-panel .cs-case-content {
    flex: 1;
    min-width: 0;
}

.cs-case-info-panel .cs-case-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 2px;
}

.cs-case-info-panel .cs-case-ref {
    font-weight: 600;
    font-size: 12px;
    color: var(--cs-accent, var(--primary-color));
}

.cs-case-info-panel .cs-case-type {
    font-size: 11px;
    color: var(--text-tertiary);
}

.cs-case-info-panel .cs-case-subject {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-case-info-panel .cs-case-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: 4px;
}

.cs-case-info-panel .cs-state-badge,
.cs-case-info-panel .cs-priority-badge {
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
}

.cs-case-info-panel .cs-state-new { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.cs-case-info-panel .cs-state-scheduled { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.cs-case-info-panel .cs-state-in-progress { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.cs-case-info-panel .cs-state-on-hold { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
.cs-case-info-panel .cs-state-completed { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.cs-case-info-panel .cs-state-cancelled { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.cs-case-info-panel .cs-priority-low { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
.cs-case-info-panel .cs-priority-medium { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.cs-case-info-panel .cs-priority-high { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.cs-case-info-panel .cs-priority-urgent { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.cs-case-info-panel .cs-case-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.cs-case-info-panel .cs-case-date i {
    font-size: 10px;
}

/* Panel Footer for View All */
.cs-panel-footer {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-sm);
}

.cs-btn-link {
    background: none;
    border: none;
    color: var(--cs-accent, var(--primary-color));
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0;
}

.cs-btn-link:hover {
    text-decoration: underline;
}

/* Stats Row for Sidebar */
.cs-stats-row {
    display: flex;
    gap: var(--space-md);
}

.cs-stat-mini {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm);
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 6px);
}

.cs-stat-mini .cs-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.cs-stat-mini .cs-stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.cs-stat-mini.cs-stat-highlight {
    background: rgba(234, 179, 8, 0.1);
}

.cs-stat-mini.cs-stat-highlight .cs-stat-value {
    color: var(--color-warning, #eab308);
}

/* Panel Divider */
.cs-panel-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--space-md) 0;
}

/* Timeline Panel (sidebar) */
.cs-timeline-panel .cs-timeline-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cs-timeline-panel .cs-timeline-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: var(--space-sm);
    border-left: 2px solid var(--border-color);
}

.cs-timeline-panel .cs-timeline-item.cs-timeline-complete {
    border-left-color: var(--color-success, #22c55e);
}

.cs-timeline-panel .cs-timeline-item.cs-timeline-cancelled {
    border-left-color: var(--color-danger, #ef4444);
}

.cs-timeline-panel .cs-timeline-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cs-timeline-panel .cs-timeline-value {
    font-size: 13px;
    color: var(--text-primary);
}

.cs-timeline-panel .cs-timeline-value small {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
}

/* History Timeline Markers */
.cs-history-marker-create { background: var(--color-success, #22c55e) !important; }
.cs-history-marker-schedule { background: var(--primary-color) !important; }
.cs-history-marker-start { background: var(--color-warning, #f59e0b) !important; }
.cs-history-marker-complete { background: var(--color-success, #22c55e) !important; }
.cs-history-marker-cancel { background: var(--color-danger, #ef4444) !important; }
.cs-history-marker-contact { background: var(--primary-color) !important; }

/* Detail Section Variants */
.cs-detail-section-success {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-md);
}

.cs-detail-section-success .cs-section-title {
    color: var(--color-success, #22c55e);
}

.cs-detail-section-warning {
    background: rgba(234, 179, 8, 0.05);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-md);
}

.cs-detail-section-warning .cs-section-title {
    color: var(--color-warning, #f59e0b);
}

.cs-detail-section-danger {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-md);
}

.cs-detail-section-danger .cs-section-title {
    color: var(--color-danger, #ef4444);
}

/* Comments Section */
.cs-comments-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.cs-comment-item {
    display: flex;
    gap: var(--space-sm);
}

.cs-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cs-comment-content {
    flex: 1;
}

.cs-comment-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.cs-comment-author {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.cs-comment-date {
    font-size: 12px;
    color: var(--text-tertiary);
}

.cs-comment-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.cs-add-comment {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.cs-comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cs-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.cs-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* Related Activities Table */
.cs-related-table-wrapper {
    overflow-x: auto;
}

.cs-related-table {
    width: 100%;
    border-collapse: collapse;
}

.cs-related-table th {
    text-align: left;
    padding: var(--space-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.cs-related-table td {
    padding: var(--space-sm);
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
}

.cs-related-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-related-row:hover {
    background: var(--bg-surface-hover);
}

.cs-ref-link {
    color: var(--cs-accent, var(--primary-color));
    font-weight: 500;
}

/* Filter Chips */
.cs-filter-chip {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.cs-filter-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Overdue Text */
.cs-overdue-text {
    color: var(--color-danger, #ef4444) !important;
    font-weight: 500;
}

/* ============================================
   TAG SELECTOR COMPONENT
   ============================================ */

.cs-tag-selector {
    position: relative;
}

.cs-tag-selector.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.cs-tag-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    min-height: 38px;
    padding: 0.5rem;
    background: var(--bg-surface, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}

.cs-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.cs-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cs-tag-remove:hover {
    background: rgba(0, 0, 0, 0.3);
}

.cs-tag-remove i {
    font-size: 0.625rem;
    color: inherit;
}

.cs-tag-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: none;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-tag-add-btn:hover {
    border-color: var(--primary-color, #2563eb);
    color: var(--primary-color, #2563eb);
    background: rgba(37, 99, 235, 0.05);
}

/* Tag Dropdown */
.cs-tag-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cs-tag-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.cs-tag-search i {
    color: var(--text-tertiary, #9ca3af);
    font-size: 0.875rem;
}

.cs-tag-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.875rem;
    background: transparent;
    color: var(--text-primary, #111827);
}

.cs-tag-search input::placeholder {
    color: var(--text-tertiary, #9ca3af);
}

.cs-tag-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--bg-muted, #f3f4f6);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
}

.cs-tag-search-clear:hover {
    background: var(--bg-hover, #e5e7eb);
}

.cs-tag-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.cs-tag-loading,
.cs-tag-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

.cs-tag-loading i,
.cs-tag-empty i {
    font-size: 1.5rem;
    opacity: 0.5;
}

.cs-tag-category {
    margin-bottom: 0.75rem;
}

.cs-tag-category:last-child {
    margin-bottom: 0;
}

.cs-tag-category-header {
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary, #9ca3af);
    letter-spacing: 0.05em;
}

.cs-tag-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.cs-tag-option:hover:not(:disabled) {
    background: var(--bg-surface-hover, #f3f4f6);
}

.cs-tag-option.selected {
    background: rgba(37, 99, 235, 0.05);
}

.cs-tag-option:disabled {
    cursor: default;
}

.cs-tag-option-pill {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.cs-tag-option i {
    color: var(--primary-color, #2563eb);
    font-size: 0.875rem;
}

.cs-tag-create {
    padding: 0.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.cs-tag-create-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem;
    background: none;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--primary-color, #2563eb);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-tag-create-btn:hover {
    background: rgba(37, 99, 235, 0.05);
    border-color: var(--primary-color, #2563eb);
}

.cs-tag-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* ============================================
   ATTACHMENT UPLOAD COMPONENT
   ============================================ */

.cs-attachment-upload {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cs-attachment-upload.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.cs-upload-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg-surface, #f9fafb);
    border: 2px dashed var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-upload-area:hover {
    border-color: var(--primary-color, #2563eb);
    background: rgba(37, 99, 235, 0.02);
}

.cs-upload-area.dragging {
    border-color: var(--primary-color, #2563eb);
    background: rgba(37, 99, 235, 0.05);
}

.cs-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cs-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    pointer-events: none;
}

.cs-upload-icon {
    font-size: 2rem;
    color: var(--text-tertiary, #9ca3af);
}

.cs-upload-area:hover .cs-upload-icon,
.cs-upload-area.dragging .cs-upload-icon {
    color: var(--primary-color, #2563eb);
}

.cs-upload-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cs-upload-primary {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.cs-upload-primary strong {
    color: var(--primary-color, #2563eb);
}

.cs-upload-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary, #9ca3af);
}

/* Attachment List */
.cs-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cs-attachment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-surface, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}

.cs-attachment-item.mock {
    border-style: dashed;
}

.cs-attachment-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 1rem;
    flex-shrink: 0;
}

.cs-attachment-icon.cs-file-image {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.cs-attachment-icon.cs-file-pdf {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.cs-attachment-icon.cs-file-video {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.cs-attachment-icon.cs-file-other {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.cs-attachment-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cs-attachment-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-attachment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary, #9ca3af);
}

.cs-attachment-mock-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cs-attachment-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    color: var(--text-tertiary, #9ca3af);
    transition: all 0.15s ease;
}

.cs-attachment-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Attachment Error */
.cs-attachment-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #dc2626;
}

.cs-attachment-error i {
    flex-shrink: 0;
}

.cs-attachment-error span {
    flex: 1;
}

.cs-attachment-error-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    color: #dc2626;
    transition: background 0.15s ease;
}

.cs-attachment-error-close:hover {
    background: rgba(220, 38, 38, 0.1);
}

/* Attachment Notice */
.cs-attachment-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.cs-attachment-notice i {
    color: #3b82f6;
    flex-shrink: 0;
}

/* ============================================
   Linked Activity Timeline Component
   ============================================ */

.cs-linked-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
}

.cs-linked-timeline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-secondary, #6b7280);
}

.cs-linked-timeline-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.cs-linked-timeline-empty span {
    font-size: 0.875rem;
}

/* Timeline chain container */
.cs-linked-timeline-chain {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0.5rem;
}

/* Connector line between nodes */
.cs-linked-timeline-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0;
    position: relative;
    margin-left: 1.5rem;
}

.cs-linked-timeline-connector-line {
    width: 2px;
    height: 24px;
    background: var(--border-color, #e5e7eb);
}

.cs-linked-timeline-link-label {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 4px;
    white-space: nowrap;
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Timeline node */
.cs-linked-timeline-node {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.cs-linked-timeline-node:hover {
    border-color: var(--cs-accent, #10b981);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cs-linked-timeline-node.current {
    border-color: var(--cs-accent, #10b981);
    border-width: 2px;
    background: rgba(16, 185, 129, 0.02);
    cursor: default;
}

/* State-based node styling */
.cs-linked-timeline-node.new {
    border-left: 3px solid #3b82f6;
}

.cs-linked-timeline-node.scheduled {
    border-left: 3px solid #8b5cf6;
}

.cs-linked-timeline-node.inprogress {
    border-left: 3px solid #f59e0b;
}

.cs-linked-timeline-node.onhold {
    border-left: 3px solid #6b7280;
}

.cs-linked-timeline-node.completed {
    border-left: 3px solid #22c55e;
}

.cs-linked-timeline-node.cancelled {
    border-left: 3px solid #ef4444;
}

/* Node dot with icon */
.cs-linked-timeline-node-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    flex-shrink: 0;
    color: white;
}

.cs-linked-timeline-node-dot i {
    font-size: 0.875rem;
}

/* Node content */
.cs-linked-timeline-node-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cs-linked-timeline-node-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cs-linked-timeline-activity-number {
    font-family: var(--font-mono, 'SFMono-Regular', Consolas, monospace);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.cs-linked-timeline-state-badge {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    color: white;
}

.cs-linked-timeline-current-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    background: var(--cs-accent, #10b981);
    color: white;
}

.cs-linked-timeline-node-subject {
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-linked-timeline-node-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.cs-linked-timeline-meta-separator {
    opacity: 0.5;
}

.cs-linked-timeline-priority-flag {
    font-weight: 600;
}

.cs-linked-timeline-node-links {
    margin-top: 0.25rem;
}

.cs-linked-timeline-link-note {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}

.cs-linked-timeline-link-note i {
    font-size: 0.625rem;
}

/* Delete link button */
.cs-linked-timeline-delete-link {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    opacity: 0;
    transition: all 0.15s ease;
}

.cs-linked-timeline-node:hover .cs-linked-timeline-delete-link {
    opacity: 1;
}

.cs-linked-timeline-delete-link:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Add link button area */
.cs-linked-timeline-add-link {
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px dashed var(--border-color, #e5e7eb);
}

/* ============================================
   Activity Link Modal Styles
   ============================================ */

.cs-link-activity-modal .tk-modal-content {
    max-width: 480px;
}

.cs-link-activity-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cs-link-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-secondary, #6b7280);
}

.cs-link-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--cs-accent, #10b981);
    border-radius: 50%;
    animation: cs-spin 1s linear infinite;
    margin-bottom: 0.75rem;
}

.cs-link-empty-activities {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary, #6b7280);
}

.cs-link-empty-activities i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.cs-link-empty-activities p {
    margin: 0;
    font-size: 0.875rem;
}

/* ============================================
   View Toggle Styles (List/Links)
   ============================================ */

.cs-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
}

.cs-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-primary, #ffffff);
    border: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cs-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--border-color, #e5e7eb);
}

.cs-toggle-btn:hover {
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-primary, #1f2937);
}

.cs-toggle-btn.active {
    background: var(--cs-accent, #10b981);
    color: white;
}

.cs-toggle-btn.active:hover {
    background: var(--cs-accent-dark, #059669);
}

.cs-toggle-btn i {
    font-size: 0.875rem;
}

/* Loading indicator */
.cs-loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-secondary, #6b7280);
    gap: 0.75rem;
}

.cs-loading-spinner-sm {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color, #e5e7eb);
    border-top-color: var(--cs-accent, #10b981);
    border-radius: 50%;
    animation: cs-spin 1s linear infinite;
}