/* ============================================
   SNext - Component Styles
   Dashboard Widgets, Strategy Cards, AI Components
   ============================================ */

/* ============================================
   AI CHAT COMPONENTS
   ============================================ */

.ai-chat-window {
    position: fixed;
    bottom: 80px;
    inset-inline-end: 24px;
    width: 420px;
    max-height: 600px;
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .ai-chat-window {
    background: var(--color-secondary-800);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.ai-chat-window.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ai-chat-window.minimized {
    height: 60px;
    max-height: 60px;
    overflow: hidden;
}

.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-secondary-200);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

[data-theme="dark"] .ai-chat-header {
    border-bottom-color: var(--color-secondary-700);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
}

.ai-chat-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .ai-chat-title {
    color: var(--color-secondary-100);
}

.ai-avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: var(--radius-full);
    color: white;
}

.ai-chat-actions {
    display: flex;
    gap: 4px;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 400px;
}

.ai-message {
    display: flex;
    gap: var(--space-3);
}

.ai-message-user {
    flex-direction: row-reverse;
}

.ai-message-avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary-100);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    color: var(--color-secondary-600);
}

[data-theme="dark"] .ai-message-avatar {
    background: var(--color-secondary-700);
    color: var(--color-secondary-300);
}

.ai-message-assistant .ai-message-avatar {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.ai-message-content {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    background: var(--color-secondary-50);
    border-radius: var(--radius-xl);
    max-width: 85%;
    font-size: var(--text-sm);
    line-height: 1.6;
}

[data-theme="dark"] .ai-message-content {
    background: var(--color-secondary-700);
}

.ai-message-user .ai-message-content {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
    color: white;
}

.ai-message-content-view-permissions {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary-600);
    text-decoration: none;
}
.ai-message-content-view-permissions:hover {
    text-decoration: underline;
}
[data-theme="dark"] .ai-message-content-view-permissions {
    color: var(--color-primary-400);
}

.ai-quick-prompts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.ai-quick-prompt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-secondary-700);
}

[data-theme="dark"] .ai-quick-prompt {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-600);
    color: var(--color-secondary-300);
}

.ai-quick-prompt:hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary-300);
    color: var(--color-primary-700);
}

[data-theme="dark"] .ai-quick-prompt:hover {
    background: var(--color-primary-900);
    border-color: var(--color-primary-700);
    color: var(--color-primary-300);
}

/* AI Workflow-from-prompt form (inside chat window) */
.ai-workflow-form-card,
.ai-workflow-result-card,
.ai-kpis-form-card,
.ai-kpis-result-card,
.ai-objectives-form-card,
.ai-objectives-result-card,
.ai-performance-form-card,
.ai-performance-result-card,
.ai-permissions-form-card,
.ai-permissions-result-card {
    margin: var(--space-4);
    padding: var(--space-4);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
}
[data-theme="dark"] .ai-workflow-form-card,
[data-theme="dark"] .ai-workflow-result-card,
[data-theme="dark"] .ai-kpis-form-card,
[data-theme="dark"] .ai-kpis-result-card,
[data-theme="dark"] .ai-objectives-form-card,
[data-theme="dark"] .ai-objectives-result-card,
[data-theme="dark"] .ai-performance-form-card,
[data-theme="dark"] .ai-performance-result-card,
[data-theme="dark"] .ai-permissions-form-card,
[data-theme="dark"] .ai-permissions-result-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-600);
}
/* Set Permissions form (structured: role + action + description, like Create Workflow) */
.ai-permissions-form-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    color: var(--color-primary-700);
}
[data-theme="dark"] .ai-permissions-form-header {
    color: var(--color-primary-300);
}
.ai-permissions-form-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}
[data-theme="dark"] .ai-permissions-form-description {
    color: var(--color-secondary-400);
}
.ai-permissions-form-hint {
    font-size: var(--text-sm);
    color: var(--color-primary-600);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}
[data-theme="dark"] .ai-permissions-form-hint {
    color: var(--color-primary-400);
}
.ai-permissions-role-label,
.ai-permissions-action-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-secondary-700);
    margin-bottom: var(--space-1);
}
[data-theme="dark"] .ai-permissions-role-label,
[data-theme="dark"] .ai-permissions-action-label {
    color: var(--color-secondary-300);
}
.ai-permissions-role-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
    background: #ffffff;
    color: var(--color-secondary-900);
}
[dir="rtl"] .ai-permissions-role-select {
    text-align: right;
}
[data-theme="dark"] .ai-permissions-role-select {
    border-color: var(--color-secondary-600);
    background: var(--color-secondary-800);
    color: var(--color-secondary-100);
}
.ai-permissions-mention-wrap {
    position: relative;
    margin-bottom: var(--space-3);
}
.ai-permissions-mention-wrap .ai-permissions-role-select {
    margin-bottom: 0;
}
.ai-permissions-mention-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 999;
    background: #ffffff;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
    max-height: 220px;
    overflow-y: auto;
    isolation: isolate;
}
[data-theme="dark"] .ai-permissions-mention-list {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-600);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ai-permissions-mention-list [role="option"] {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    color: var(--color-secondary-800);
}
.ai-permissions-mention-list [role="option"]:hover {
    background: var(--color-secondary-100);
}
[data-theme="dark"] .ai-permissions-mention-list [role="option"] {
    color: var(--color-secondary-200);
}
[data-theme="dark"] .ai-permissions-mention-list [role="option"]:hover {
    background: var(--color-secondary-700);
}
.ai-permissions-scope-select-all {
    font-weight: 600;
    border-bottom: 1px solid var(--color-secondary-200);
}
[data-theme="dark"] .ai-permissions-scope-select-all {
    border-bottom-color: var(--color-secondary-600);
}
.ai-permissions-mention-list [role="option"] {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    color: var(--color-secondary-800);
}
.ai-permissions-mention-list [role="option"]:hover {
    background: var(--color-secondary-100);
}
[data-theme="dark"] .ai-permissions-mention-list [role="option"] {
    color: var(--color-secondary-200);
}
[data-theme="dark"] .ai-permissions-mention-list [role="option"]:hover {
    background: var(--color-secondary-700);
}
.ai-permissions-scope-select-all {
    font-weight: 600;
    border-bottom: 1px solid var(--color-secondary-200);
}
[data-theme="dark"] .ai-permissions-scope-select-all {
    border-bottom-color: var(--color-secondary-600);
}
.ai-permissions-mention-item {
    width: 100%;
    border: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    color: var(--color-secondary-800);
}
[data-theme="dark"] .ai-permissions-mention-item {
    color: var(--color-secondary-200);
    background: var(--color-secondary-800);
}
.ai-permissions-mention-item:hover,
.ai-permissions-mention-item.is-active {
    background: var(--color-secondary-100);
}
[data-theme="dark"] .ai-permissions-mention-item:hover,
[data-theme="dark"] .ai-permissions-mention-item.is-active {
    background: var(--color-secondary-700);
}
.ai-permissions-mention-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-permissions-mention-item-email {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme="dark"] .ai-permissions-mention-item-email {
    color: var(--color-secondary-400);
}
.ai-permissions-mention-empty {
    font-size: var(--text-sm);
    color: var(--color-secondary-500);
    padding: var(--space-2) var(--space-3);
}
.ai-permissions-action-group {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}
.ai-permissions-action-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
    color: var(--color-secondary-700);
}
[data-theme="dark"] .ai-permissions-action-option {
    color: var(--color-secondary-300);
}
.ai-permissions-description-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
    resize: vertical;
    min-height: 52px;
    background: #ffffff;
    color: var(--color-secondary-900);
}
[data-theme="dark"] .ai-permissions-description-input {
    border-color: var(--color-secondary-600);
    background: var(--color-secondary-800);
    color: var(--color-secondary-100);
}
.ai-permissions-form-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.ai-permissions-scope-wrap {
    margin-top: var(--space-3);
}
.ai-permissions-scope-wrap .ai-permissions-role-label {
    display: block;
    margin-bottom: var(--space-1);
}
.ai-permissions-scope-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.ai-permissions-scope-entity-type-wrap {
    flex: 0 0 auto;
}
.ai-permissions-scope-entity-type-wrap .ai-permissions-role-select {
    min-width: 140px;
    max-width: 100%;
}
.ai-permissions-scope-row .ai-permissions-mention-wrap {
    flex: 1;
    min-width: 0;
}
.ai-permissions-scope-hint {
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    margin: 0 0 var(--space-2);
}
[data-theme="dark"] .ai-permissions-scope-hint {
    color: var(--color-neutral-400);
}
.ai-permissions-scope-items-wrap {
    margin-bottom: var(--space-2);
}
.ai-permissions-scope-items-label {
    font-size: var(--text-sm);
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-neutral-700);
}
[data-theme="dark"] .ai-permissions-scope-items-label {
    color: var(--color-neutral-300);
}
.ai-permissions-scope-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}
.ai-permissions-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
[data-theme="dark"] .ai-permissions-scope-chip {
    background: var(--color-neutral-700);
    border-color: var(--color-neutral-600);
}
.ai-permissions-scope-chip-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-permissions-scope-chip-remove {
    padding: 0;
    margin: 0;
    margin-inline-start: 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-neutral-500);
    border-radius: var(--radius-sm);
}
.ai-permissions-scope-chip-remove:hover {
    color: var(--color-error-600);
}
[data-theme="dark"] .ai-permissions-scope-chip-remove:hover {
    color: var(--color-error-400);
}
.ai-permissions-form-loading {
    text-align: center;
    padding: var(--space-4);
}
.ai-permissions-form-spinner {
    width: 24px;
    height: 24px;
    margin: 0 auto var(--space-2);
    border: 2px solid var(--color-secondary-200);
    border-top-color: var(--color-primary-600);
    border-radius: var(--radius-full);
    animation: ai-spin 0.8s linear infinite;
}
.ai-permissions-form-error {
    font-size: var(--text-sm);
    color: var(--color-error-600);
    margin-top: var(--space-2);
}
[data-theme="dark"] .ai-permissions-form-error {
    color: var(--color-error-400);
}
.ai-permissions-result-title {
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    color: var(--color-primary-700);
}
[data-theme="dark"] .ai-permissions-result-title {
    color: var(--color-primary-300);
}
.ai-permissions-result-message {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}
[data-theme="dark"] .ai-permissions-result-message {
    color: var(--color-secondary-400);
}
.ai-permissions-result-actions {
    margin-top: var(--space-3);
}
.ai-permissions-result-link {
    color: var(--color-primary-600);
    text-decoration: underline;
}
.ai-permissions-result-link.btn {
    display: inline-block;
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}
[data-theme="dark"] .ai-permissions-result-link {
    color: var(--color-primary-400);
}
[data-theme="dark"] .ai-permissions-result-link.btn {
    color: #fff;
}
/* Legacy Set Permissions hint (kept for reference; form replaces it) */
.ai-permissions-hint-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    color: var(--color-primary-700);
}
[data-theme="dark"] .ai-permissions-hint-header {
    color: var(--color-primary-300);
}
.ai-permissions-hint-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}
[data-theme="dark"] .ai-permissions-hint-description {
    color: var(--color-secondary-400);
}
.ai-permissions-hint-example-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-600);
    margin-bottom: var(--space-1);
}
[data-theme="dark"] .ai-permissions-hint-example-label {
    color: var(--color-secondary-400);
}
.ai-permissions-hint-example {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    background: var(--color-secondary-100);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    color: var(--color-secondary-800);
}
[data-theme="dark"] .ai-permissions-hint-example {
    background: var(--color-secondary-700);
    border-color: var(--color-secondary-600);
    color: var(--color-secondary-200);
}
.ai-permissions-hint-cta {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    margin-bottom: 0;
}
[data-theme="dark"] .ai-permissions-hint-cta {
    color: var(--color-secondary-400);
}
/* Analyze Performance form (AI assistant) */
.ai-performance-form-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    color: var(--color-primary-700);
}
[data-theme="dark"] .ai-performance-form-header {
    color: var(--color-primary-300);
}
.ai-performance-form-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}
[data-theme="dark"] .ai-performance-form-description {
    color: var(--color-secondary-400);
}
.ai-performance-form-configure-hint {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    margin-bottom: var(--space-3);
}
.ai-performance-form-configure-link {
    color: var(--color-primary-600);
    text-decoration: underline;
}
[data-theme="dark"] .ai-performance-form-configure-link {
    color: var(--color-primary-400);
}
.ai-performance-plan-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-1);
    color: var(--color-secondary-700);
}
[data-theme="dark"] .ai-performance-plan-label {
    color: var(--color-secondary-300);
}
.ai-performance-plan-select {
    width: 100%;
    max-width: 320px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    background: white;
}
[data-theme="dark"] .ai-performance-plan-select {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-600);
    color: var(--color-secondary-100);
}
.ai-performance-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.ai-performance-form-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.ai-performance-form-loading {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}
.ai-performance-form-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-4);
    border: 3px solid var(--color-secondary-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: ai-workflow-spin 0.9s linear infinite;
}
[data-theme="dark"] .ai-performance-form-spinner {
    border-color: var(--color-secondary-600);
    border-top-color: var(--color-primary-400);
}
.ai-performance-form-loading-text {
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-secondary-800);
}
[data-theme="dark"] .ai-performance-form-loading-text {
    color: var(--color-secondary-200);
}
.ai-performance-form-loading-hint {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
}
[data-theme="dark"] .ai-performance-form-loading-hint {
    color: var(--color-secondary-400);
}
.ai-performance-form-error {
    margin-top: var(--space-3);
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-error-700);
    background: var(--color-error-50);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-md);
}
[data-theme="dark"] .ai-performance-form-error {
    color: var(--color-error-300);
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--color-error-800);
}
/* Analyze Performance result card */
.ai-performance-result-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
    color: var(--color-primary-700);
}
[data-theme="dark"] .ai-performance-result-title {
    color: var(--color-primary-300);
}
.ai-performance-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--color-secondary-100);
    border-radius: var(--radius-md);
}
[data-theme="dark"] .ai-performance-metrics {
    background: var(--color-secondary-700);
}
.ai-performance-metrics-title {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-inline-end: var(--space-2);
    color: var(--color-secondary-700);
}
[data-theme="dark"] .ai-performance-metrics-title {
    color: var(--color-secondary-200);
}
.ai-performance-chip {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}
.ai-performance-chip-on-track {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-700);
}
[data-theme="dark"] .ai-performance-chip-on-track {
    color: var(--color-success-400);
}
.ai-performance-chip-at-risk {
    background: rgba(245, 158, 11, 0.2);
    color: #b45309;
}
[data-theme="dark"] .ai-performance-chip-at-risk {
    color: #fbbf24;
}
.ai-performance-chip-behind {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-error-700);
}
[data-theme="dark"] .ai-performance-chip-behind {
    color: var(--color-error-400);
}
.ai-performance-chip-completed {
    background: rgba(59, 130, 246, 0.2);
    color: #1d4ed8;
}
[data-theme="dark"] .ai-performance-chip-completed {
    color: #60a5fa;
}
.ai-performance-section {
    margin-bottom: var(--space-4);
}
.ai-performance-section:last-child {
    margin-bottom: 0;
}
.ai-performance-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-secondary-800);
}
[data-theme="dark"] .ai-performance-section-title {
    color: var(--color-secondary-200);
}
.ai-performance-section-text {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-secondary-700);
    margin: 0;
}
[data-theme="dark"] .ai-performance-section-text {
    color: var(--color-secondary-300);
}
.ai-performance-section-list {
    margin: 0;
    padding-inline-start: var(--space-6);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-secondary-700);
}
[data-theme="dark"] .ai-performance-section-list {
    color: var(--color-secondary-300);
}
.ai-performance-section-list li {
    margin-bottom: var(--space-1);
}
.ai-performance-section-list li:last-child {
    margin-bottom: 0;
}
.ai-performance-section-empty {
    list-style: none;
    padding-inline-start: 0;
    margin-inline-start: calc(-1 * var(--space-6));
    color: var(--color-secondary-500);
}
.ai-performance-narrative {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-secondary-700);
}
[data-theme="dark"] .ai-performance-narrative {
    color: var(--color-secondary-300);
}
.ai-performance-narrative p {
    margin: 0 0 var(--space-3);
}
.ai-performance-narrative p:last-child {
    margin-bottom: 0;
}
.ai-performance-no-data {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin: 0;
}
[data-theme="dark"] .ai-performance-no-data {
    color: var(--color-secondary-400);
}
/* Generate KPIs form (AI assistant) */
.ai-kpis-form-header {
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.ai-kpis-form-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-3);
}
[data-theme="dark"] .ai-kpis-form-description {
    color: var(--color-secondary-400);
}
.ai-kpis-objective-input {
    width: 100%;
    min-height: 52px;
    padding: var(--space-3);
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}
.ai-kpis-form-actions {
    display: flex;
    gap: var(--space-2);
}
.ai-kpis-form-loading {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}
.ai-kpis-form-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-4);
    border: 3px solid var(--color-secondary-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: ai-workflow-spin 0.9s linear infinite;
}
[data-theme="dark"] .ai-kpis-form-spinner {
    border-color: var(--color-secondary-600);
    border-top-color: var(--color-primary-400);
}
.ai-kpis-form-loading-text {
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-secondary-800);
}
[data-theme="dark"] .ai-kpis-form-loading-text {
    color: var(--color-secondary-200);
}
.ai-kpis-form-error {
    margin-top: var(--space-3);
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-error-700);
    background: var(--color-error-50);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-md);
}
[data-theme="dark"] .ai-kpis-form-error {
    color: var(--color-error-300);
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--color-error-800);
}
.ai-kpis-result-title {
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.ai-kpis-result-card .ai-kpis-report-table-wrap {
    overflow-x: auto;
    margin-top: var(--space-2);
}
.ai-kpis-result-card .ai-kpis-report-table {
    width: 100%;
    font-size: var(--text-sm);
    border-collapse: collapse;
}
.ai-kpis-result-card .ai-kpis-report-table th,
.ai-kpis-result-card .ai-kpis-report-table td {
    padding: var(--space-2) var(--space-3);
    text-align: start;
    border: 1px solid var(--color-secondary-200);
}
[data-theme="dark"] .ai-kpis-result-card .ai-kpis-report-table th,
[data-theme="dark"] .ai-kpis-result-card .ai-kpis-report-table td {
    border-color: var(--color-secondary-600);
}
.ai-kpis-result-card .ai-kpis-report-table th {
    font-weight: 600;
    background: var(--color-secondary-100);
}
[data-theme="dark"] .ai-kpis-result-card .ai-kpis-report-table th {
    background: var(--color-secondary-700);
}
.ai-kpis-create-section {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.ai-kpis-create-label {
    font-size: var(--text-sm);
    font-weight: 500;
    margin-inline-end: var(--space-2);
}
.ai-kpis-objective-select {
    min-width: 200px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.ai-kpis-create-btn {
    margin-inline-start: var(--space-2);
}
.ai-kpis-created-list {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
}
.ai-kpis-created-actions {
    margin-top: var(--space-2);
}
/* Suggest Objectives form (AI assistant) */
.ai-objectives-form-header {
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.ai-objectives-form-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-3);
}
[data-theme="dark"] .ai-objectives-form-description {
    color: var(--color-secondary-400);
}
.ai-objectives-form-body #ai-objectives-plan-form-select {
    margin-bottom: var(--space-3);
}
.ai-objectives-context-input {
    width: 100%;
    min-height: 72px;
    padding: var(--space-3);
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}
.ai-objectives-form-actions {
    display: flex;
    gap: var(--space-2);
}
.ai-objectives-form-loading {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}
.ai-objectives-form-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-4);
    border: 3px solid var(--color-secondary-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: ai-workflow-spin 0.9s linear infinite;
}
[data-theme="dark"] .ai-objectives-form-spinner {
    border-color: var(--color-secondary-600);
    border-top-color: var(--color-primary-400);
}
.ai-objectives-form-loading-text {
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-secondary-800);
}
[data-theme="dark"] .ai-objectives-form-loading-text {
    color: var(--color-secondary-200);
}
.ai-objectives-form-error {
    margin-top: var(--space-3);
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-error-700);
    background: var(--color-error-50);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-md);
}
[data-theme="dark"] .ai-objectives-form-error {
    color: var(--color-error-300);
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--color-error-800);
}
.ai-objectives-result-title {
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.ai-objectives-result-card .ai-objectives-report-table-wrap {
    overflow-x: auto;
    margin-top: var(--space-2);
}
.ai-objectives-result-card .ai-objectives-report-table {
    width: 100%;
    font-size: var(--text-sm);
    border-collapse: collapse;
}
.ai-objectives-result-card .ai-objectives-report-table th,
.ai-objectives-result-card .ai-objectives-report-table td {
    padding: var(--space-2) var(--space-3);
    text-align: start;
    border: 1px solid var(--color-secondary-200);
}
[data-theme="dark"] .ai-objectives-result-card .ai-objectives-report-table th,
[data-theme="dark"] .ai-objectives-result-card .ai-objectives-report-table td {
    border-color: var(--color-secondary-600);
}
.ai-objectives-result-card .ai-objectives-report-table th {
    font-weight: 600;
    background: var(--color-secondary-100);
}
[data-theme="dark"] .ai-objectives-result-card .ai-objectives-report-table th {
    background: var(--color-secondary-700);
}
.ai-objectives-create-section {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}
[data-theme="dark"] .ai-objectives-create-section {
    background: #1e293b;
    border-color: #334155;
}
.ai-objectives-create-section .ai-objectives-create-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 10px 0;
}
[data-theme="dark"] .ai-objectives-create-section .ai-objectives-create-title {
    color: #cbd5e1;
}
.ai-objectives-create-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.ai-objectives-create-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-objectives-create-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    display: block !important;
}
[data-theme="dark"] .ai-objectives-create-label {
    color: #94a3b8;
}
.ai-objectives-plan-select,
.ai-objectives-perspective-select,
.ai-objectives-priority-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
}
[data-theme="dark"] .ai-objectives-plan-select,
[data-theme="dark"] .ai-objectives-perspective-select,
[data-theme="dark"] .ai-objectives-priority-select {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}
.ai-objectives-create-btn {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.ai-objectives-created-list {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
}
.ai-objectives-created-actions {
    margin-top: var(--space-2);
}
.ai-workflow-form-header {
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.ai-workflow-form-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-3);
}
[data-theme="dark"] .ai-workflow-form-description {
    color: var(--color-secondary-400);
}
.ai-workflow-form-configure-hint {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-3);
}
[data-theme="dark"] .ai-workflow-form-configure-hint {
    color: var(--color-secondary-400);
}
.ai-workflow-form-configure-text {
    margin-inline-end: var(--space-2);
}
.ai-workflow-form-configure-link {
    color: var(--color-primary-600);
    text-decoration: underline;
}
.ai-workflow-form-configure-link:hover {
    color: var(--color-primary-700);
}
[data-theme="dark"] .ai-workflow-form-configure-link {
    color: var(--color-primary-400);
}
[data-theme="dark"] .ai-workflow-form-configure-link:hover {
    color: var(--color-primary-300);
}
.ai-workflow-prompt-input {
    width: 100%;
    min-height: 72px;
    padding: var(--space-3);
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}
.ai-workflow-form-actions {
    display: flex;
    gap: var(--space-2);
}

/* Workflow form: loading state (spinner + hint) */
.ai-workflow-form-loading {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}
.ai-workflow-form-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-4);
    border: 3px solid var(--color-secondary-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: ai-workflow-spin 0.9s linear infinite;
}
[data-theme="dark"] .ai-workflow-form-spinner {
    border-color: var(--color-secondary-600);
    border-top-color: var(--color-primary-400);
}
@keyframes ai-workflow-spin {
    to { transform: rotate(360deg); }
}
.ai-workflow-form-loading-text {
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-secondary-800);
}
[data-theme="dark"] .ai-workflow-form-loading-text {
    color: var(--color-secondary-200);
}
.ai-workflow-form-loading-hint {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
}
[data-theme="dark"] .ai-workflow-form-loading-hint {
    color: var(--color-secondary-400);
}

.ai-workflow-form-error {
    margin-top: var(--space-3);
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-error-700);
    background: var(--color-error-50);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-md);
}
[data-theme="dark"] .ai-workflow-form-error {
    color: var(--color-error-300);
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--color-error-800);
}

.ai-workflow-result-title {
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.ai-workflow-result-narrative {
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
    white-space: pre-wrap;
}
.ai-workflow-applied-msg {
    color: var(--color-success-600);
    font-size: var(--text-sm);
}

.ai-chat-input {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .ai-chat-input {
    border-top-color: var(--color-secondary-700);
}

.ai-prompt-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ai-prompt-context {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ai-prompt-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-primary-50);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--color-primary-700);
}

[data-theme="dark"] .ai-prompt-context-chip {
    background: var(--color-primary-900);
    color: var(--color-primary-300);
}

.ai-prompt-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-secondary-200);
    position: relative;
}

[data-theme="dark"] .ai-prompt-input-wrapper {
    background: var(--color-secondary-700);
    border-color: var(--color-secondary-600);
}

.ai-prompt-textarea {
    flex: 1;
    border: none;
    background: none;
    resize: none;
    font-size: var(--text-sm);
    line-height: 1.5;
    min-height: 40px;
    max-height: 120px;
    outline: none;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .ai-prompt-textarea {
    color: var(--color-secondary-100);
}

.ai-prompt-textarea::placeholder {
    color: var(--color-secondary-400);
}

.ai-prompt-actions {
    display: flex;
    gap: 4px;
}

/* ─── @Mention Autocomplete Dropdown ─── */
.ai-prompt-mention-dropdown {
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    max-height: 260px;
    overflow-y: auto;
    z-index: 100;
    padding: var(--space-1) 0;
}

[data-theme="dark"] .ai-prompt-mention-dropdown {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-600);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ai-mention-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background 0.12s;
    border: none;
    width: 100%;
    text-align: start;
    background: transparent;
}

.ai-mention-item:hover,
.ai-mention-item.is-active {
    background: var(--color-primary-50);
}

[data-theme="dark"] .ai-mention-item:hover,
[data-theme="dark"] .ai-mention-item.is-active {
    background: var(--color-secondary-700);
}

.ai-mention-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    overflow: hidden;
}

[data-theme="dark"] .ai-mention-avatar {
    background: var(--color-primary-900);
    color: var(--color-primary-300);
}

.ai-mention-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.ai-mention-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ai-mention-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-secondary-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

[data-theme="dark"] .ai-mention-name {
    color: var(--color-secondary-100);
}

.ai-mention-email {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

[data-theme="dark"] .ai-mention-email {
    color: var(--color-secondary-400);
}

.ai-mention-empty {
    font-size: var(--text-sm);
    color: var(--color-secondary-500);
    padding: var(--space-3) var(--space-3);
    text-align: center;
}

.ai-mention-tag {
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: inherit;
}

/* ─── Slash-command: category picker & entity items ─── */

.ai-mention-section-header {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-3) var(--space-1);
}

[data-theme="dark"] .ai-mention-section-header {
    color: var(--color-secondary-500);
}

.ai-mention-entity-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-mention-item--category .ai-mention-email,
.ai-mention-item--entity .ai-mention-email,
.ai-mention-item--action .ai-mention-email {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    opacity: 0.7;
}

.ai-mention-item--action {
    border-inline-start: 3px solid transparent;
}
.ai-mention-item--action:hover,
.ai-mention-item--action.is-active {
    border-inline-start-color: var(--color-primary-500);
}

.ai-mention-tag--entity {
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: inherit;
    background: color-mix(in srgb, var(--entity-color, #6b7280) 12%, transparent);
    color: var(--entity-color, #6b7280);
}

[data-theme="dark"] .ai-mention-tag--entity {
    background: color-mix(in srgb, var(--entity-color, #6b7280) 25%, transparent);
    color: color-mix(in srgb, var(--entity-color, #6b7280) 70%, #fff);
}

/* ─── Mention legend ─── */

.ai-mention-legend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    flex-wrap: wrap;
}

.ai-mention-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--color-secondary-100);
    color: var(--color-secondary-600);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    border: none;
    font-family: inherit;
    line-height: 1.6;
}

.ai-mention-legend-chip:hover {
    background: var(--color-secondary-200);
    color: var(--color-secondary-800);
}

[data-theme="dark"] .ai-mention-legend-chip {
    background: var(--color-secondary-700);
    color: var(--color-secondary-300);
}

[data-theme="dark"] .ai-mention-legend-chip:hover {
    background: var(--color-secondary-600);
    color: var(--color-secondary-100);
}

.ai-mention-legend-chip .legend-trigger {
    font-weight: 700;
    font-family: var(--font-mono, monospace);
}

.ai-mention-legend-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--color-secondary-100);
    color: var(--color-secondary-500);
    cursor: pointer;
    border: none;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    margin-inline-start: 2px;
    flex-shrink: 0;
}

.ai-mention-legend-toggle:hover {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

[data-theme="dark"] .ai-mention-legend-toggle {
    background: var(--color-secondary-700);
    color: var(--color-secondary-400);
}

[data-theme="dark"] .ai-mention-legend-toggle:hover {
    background: var(--color-primary-900);
    color: var(--color-primary-300);
}

.ai-mention-legend-expanded {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2) var(--space-2);
}

.ai-mention-legend-expanded.is-visible {
    display: flex;
}

.ai-mention-legend-entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    border: none;
    font-family: inherit;
    line-height: 1.6;
    cursor: pointer;
    transition: opacity 0.15s;
}

.ai-mention-legend-entity-chip:hover {
    opacity: 0.8;
}

.ai-mention-legend-section-title {
    width: 100%;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-secondary-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: var(--space-1);
}

.ai-mention-legend-section-title:first-child {
    padding-top: 0;
}

.ai-mention-legend-entity-chip .legend-trigger {
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
}

.ai-prompt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    padding-top: var(--space-2);
}

.ai-model-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-model-dot {
    width: 8px;
    height: 8px;
    background: var(--color-success-main);
    border-radius: var(--radius-full);
    animation: pulse 2s infinite;
}

.ai-usage-indicator {
    font-weight: 500;
}

/* AI Loading State */
.ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
}

.ai-loading-dots {
    display: flex;
    gap: 6px;
}

.ai-loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--color-primary-500);
    border-radius: var(--radius-full);
    animation: bounce 1.4s infinite ease-in-out;
}

.ai-loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.ai-loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.ai-loading-text {
    font-size: var(--text-sm);
    color: var(--color-secondary-500);
}

/* AI Suggestion Card */
.ai-suggestion-card {
    padding: var(--space-4);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3);
}

[data-theme="dark"] .ai-suggestion-card {
    background: var(--color-secondary-700);
    border-color: var(--color-secondary-600);
}

.ai-suggestion-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ai-suggestion-icon {
    font-size: 20px;
    color: var(--color-warning-main);
}

.ai-suggestion-type {
    flex: 1;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-secondary-500);
}

.ai-suggestion-confidence {
    font-size: var(--text-xs);
    color: var(--color-secondary-400);
}

.ai-suggestion-title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-secondary-900);
}

[data-theme="dark"] .ai-suggestion-title {
    color: var(--color-secondary-100);
}

.ai-suggestion-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

[data-theme="dark"] .ai-suggestion-description {
    color: var(--color-secondary-400);
}

.ai-suggestion-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* Mobile AI Chat */
@media (max-width: 767px) {
    .ai-chat-window {
        width: calc(100% - 32px);
        inset-inline-end: 16px;
        bottom: calc(var(--mobile-nav-height) + 16px);
        max-height: calc(100vh - var(--mobile-nav-height) - 100px);
    }
}

/* ============================================
   STRATEGY CARDS
   ============================================ */

/* Objective Card */
.objective-card {
    background: white;
    border: 2px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Status-based border colors */
.objective-card[data-status="on_track"] {
    border-color: var(--status-on-track);
    background: linear-gradient(to bottom, rgba(34, 197, 94, 0.02), white);
}

.objective-card[data-status="at_risk"] {
    border-color: var(--status-at-risk);
    background: linear-gradient(to bottom, rgba(245, 158, 11, 0.02), white);
}

.objective-card[data-status="behind"] {
    border-color: var(--status-behind);
    background: linear-gradient(to bottom, rgba(239, 68, 68, 0.02), white);
}

.objective-card[data-status="completed"] {
    border-color: var(--status-completed);
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.02), white);
}

.objective-card[data-status="not_started"] {
    border-color: var(--status-not-started);
    background: linear-gradient(to bottom, rgba(148, 163, 184, 0.02), white);
}

.objective-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 4px;
    height: 100%;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.objective-card[data-status="on_track"]::before {
    background: var(--status-on-track);
}

.objective-card[data-status="at_risk"]::before {
    background: var(--status-at-risk);
}

.objective-card[data-status="behind"]::before {
    background: var(--status-behind);
}

.objective-card[data-status="completed"]::before {
    background: var(--status-completed);
}

.objective-card[data-status="not_started"]::before {
    background: var(--status-not-started);
}

[data-theme="dark"] .objective-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

[data-theme="dark"] .objective-card[data-status="on_track"] {
    background: linear-gradient(to bottom, rgba(34, 197, 94, 0.1), var(--color-secondary-800));
    border-color: var(--status-on-track);
}

[data-theme="dark"] .objective-card[data-status="at_risk"] {
    background: linear-gradient(to bottom, rgba(245, 158, 11, 0.1), var(--color-secondary-800));
    border-color: var(--status-at-risk);
}

[data-theme="dark"] .objective-card[data-status="behind"] {
    background: linear-gradient(to bottom, rgba(239, 68, 68, 0.1), var(--color-secondary-800));
    border-color: var(--status-behind);
}

[data-theme="dark"] .objective-card[data-status="completed"] {
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.1), var(--color-secondary-800));
    border-color: var(--status-completed);
}

[data-theme="dark"] .objective-card[data-status="not_started"] {
    background: linear-gradient(to bottom, rgba(148, 163, 184, 0.1), var(--color-secondary-800));
    border-color: var(--status-not-started);
}

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

.objective-card[data-status="on_track"]:hover {
    border-color: var(--status-on-track);
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.2);
}

.objective-card[data-status="at_risk"]:hover {
    border-color: var(--status-at-risk);
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.2);
}

.objective-card[data-status="behind"]:hover {
    border-color: var(--status-behind);
    box-shadow: 0 12px 32px rgba(239, 68, 68, 0.2);
}

.objective-card[data-status="completed"]:hover {
    border-color: var(--status-completed);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .objective-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.objective-card-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}

.objective-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
}

.objective-card-meta .objective-card-code {
    display: block;
    margin-bottom: 0;
}

.objective-card-meta .status-badge {
    display: inline-flex;
    align-items: center;
}

.objective-card-title-section {
    display: flex;
    width: 100%;
    min-width: 0;
    flex: 1;
}

.objective-card-title-section .objective-card-title {
    width: 100%;
    min-width: 0;
}

.objective-card-title-section .objective-card-title a {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    text-align: start;
}

.objective-card-code {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.objective-card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 500;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}

.status-dot-on_track { background: var(--status-on-track); }
.status-dot-at_risk { background: var(--status-at-risk); }
.status-dot-behind { background: var(--status-behind); }
.status-dot-not_started { background: var(--status-not-started); }
.status-dot-completed { background: var(--status-completed); }
.status-dot-exceeded { background: var(--status-exceeded); }

.objective-card-title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--color-secondary-900);
    line-height: 1.3;
}

.objective-card-title a {
    color: var(--color-secondary-900);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.objective-card-title a i {
    color: var(--color-primary-500);
    flex-shrink: 0;
}

.objective-card-title a:hover {
    color: var(--color-primary-600);
}

.objective-card-title a:hover i {
    color: var(--color-primary-600);
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

[data-theme="dark"] .objective-card-title {
    color: var(--color-secondary-100);
}

[data-theme="dark"] .objective-card-title a {
    color: var(--color-secondary-100);
}

[data-theme="dark"] .objective-card-title a:hover {
    color: var(--color-primary-400);
}

.objective-card-body {
    flex: 1;
    margin-bottom: var(--space-4);
}

.objective-card-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-5);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.8em;
}

[data-theme="dark"] .objective-card-description {
    color: var(--color-secondary-400);
}

.objective-card-progress {
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.objective-card-progress .progress-gauge {
    width: 100px;
    height: 100px;
    position: relative;
}

.objective-card-progress .progress-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.objective-card-progress .progress-gauge-bg {
    fill: none;
    stroke: var(--color-secondary-200);
    stroke-width: 8;
}

[data-theme="dark"] .objective-card-progress .progress-gauge-bg {
    stroke: var(--color-secondary-700);
}

.objective-card-progress .progress-gauge-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.objective-card-progress .progress-gauge-on_track .progress-gauge-fill {
    stroke: var(--status-on-track);
}

.objective-card-progress .progress-gauge-at_risk .progress-gauge-fill {
    stroke: var(--status-at-risk);
}

.objective-card-progress .progress-gauge-behind .progress-gauge-fill {
    stroke: var(--status-behind);
}

.objective-card-progress .progress-gauge-completed .progress-gauge-fill {
    stroke: var(--status-completed);
}

.objective-card-progress .progress-gauge-not_started .progress-gauge-fill {
    stroke: var(--status-not-started);
}

.objective-card-progress .progress-gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.objective-card-progress .progress-gauge-number {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-secondary-900);
    line-height: 1;
}

[data-theme="dark"] .objective-card-progress .progress-gauge-number {
    color: var(--color-secondary-100);
}

.objective-card-progress .progress-gauge-symbol {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-secondary-600);
    margin-inline-start: 2px;
}

[data-theme="dark"] .objective-card-progress .progress-gauge-symbol {
    color: var(--color-secondary-400);
}

.objective-card-progress .progress-label-text {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-600);
    text-align: center;
}

[data-theme="dark"] .objective-card-progress .progress-label-text {
    color: var(--color-secondary-400);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-secondary-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

[data-theme="dark"] .progress-bar {
    background: var(--color-secondary-700);
}

.progress-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.progress-bar-on_track { background: var(--status-on-track); }
.progress-bar-at_risk { background: var(--status-at-risk); }
.progress-bar-behind { background: var(--status-behind); }
.progress-bar-completed { background: var(--status-completed); }

.progress-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-600);
}

[data-theme="dark"] .progress-label {
    color: var(--color-secondary-400);
}

.objective-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-4);
    margin-top: auto;
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .objective-card-footer {
    border-top-color: var(--color-secondary-700);
}

.objective-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
}

.objective-card-owner,
.objective-card-kpis {
    display: flex;
    align-items: center;
    gap: 6px;
}

.objective-card-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
}

.objective-card-actions .btn {
    white-space: nowrap;
}

/* KPI Card */
.kpi-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 4px;
    height: 100%;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.kpi-card[data-status="on_track"]::before {
    background: var(--status-on-track);
}

.kpi-card[data-status="at_risk"]::before {
    background: var(--status-at-risk);
}

.kpi-card[data-status="behind"]::before {
    background: var(--status-behind);
}

.kpi-card[data-status="completed"]::before {
    background: var(--status-completed);
}

.kpi-card[data-status="not_started"]::before {
    background: var(--status-not-started);
}

.kpi-card[data-status="exceeded"]::before {
    background: var(--status-exceeded, var(--color-primary-500, #8b5cf6));
}

[data-theme="dark"] .kpi-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.kpi-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.kpi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-5);
}

.kpi-card-info {
    flex: 1;
}

.kpi-card-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-secondary-400);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.kpi-card-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .kpi-card-name {
    color: var(--color-secondary-100);
}

.kpi-card-badge {
    margin-inline-start: var(--space-3);
}

.kpi-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    margin-inline-start: var(--space-3);
}

/* KPI Type Badges */
.kpi-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.kpi-type-strategic {
    background-color: rgba(59, 130, 246, 0.1);
    color: rgb(37, 99, 235);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .kpi-type-strategic {
    background-color: rgba(59, 130, 246, 0.15);
    color: rgb(96, 165, 250);
    border-color: rgba(59, 130, 246, 0.3);
}

.kpi-type-benefits {
    background-color: rgba(168, 85, 247, 0.1);
    color: rgb(147, 51, 234);
    border: 1px solid rgba(168, 85, 247, 0.2);
}

[data-theme="dark"] .kpi-type-benefits {
    background-color: rgba(168, 85, 247, 0.15);
    color: rgb(196, 181, 253);
    border-color: rgba(168, 85, 247, 0.3);
}

/* Program type badges (strategic vs standard/portfolio) – app-wide */
.status-badge.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-badge.type-badge.type-strategic {
    background-color: rgba(124, 58, 237, 0.12);
    color: rgb(109, 40, 217);
    border-color: rgba(124, 58, 237, 0.25);
}

[data-theme="dark"] .status-badge.type-badge.type-strategic {
    background-color: rgba(139, 92, 246, 0.2);
    color: rgb(196, 181, 253);
    border-color: rgba(139, 92, 246, 0.35);
}

.status-badge.type-badge.type-standard {
    background-color: rgba(59, 130, 246, 0.12);
    color: rgb(37, 99, 235);
    border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .status-badge.type-badge.type-standard {
    background-color: rgba(59, 130, 246, 0.2);
    color: rgb(147, 197, 253);
    border-color: rgba(59, 130, 246, 0.35);
}

/* KPI Card left bar is status-based via .kpi-card[data-status]::before (same as objective cards) */

/* KPI Card Relationship Section */
.kpi-card-relationship {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-secondary-200);
    border-bottom: 1px solid var(--color-secondary-200);
    background-color: var(--color-secondary-50);
    margin: 0.5rem 0;
    border-radius: var(--radius-md);
}

/* Fixed height (3 lines) with expand for consistent card layout */
.kpi-card-relationship__content {
    max-height: 5.25rem;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.kpi-card-relationship.is-expanded .kpi-card-relationship__content {
    max-height: 80rem;
}

.kpi-card-relationship__toggle {
    display: inline-flex;
    align-items: center;
    margin-top: 0.375rem;
    padding: 0.125rem 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary-600);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.kpi-card-relationship__toggle:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

.kpi-card-relationship__toggle[hidden] {
    display: none;
}

[data-theme="dark"] .kpi-card-relationship__toggle {
    color: var(--color-primary-400);
}

[data-theme="dark"] .kpi-card-relationship__toggle:hover {
    color: var(--color-primary-300);
}

[data-theme="dark"] .kpi-card-relationship {
    background-color: var(--color-secondary-800);
    border-top-color: var(--color-secondary-700);
    border-bottom-color: var(--color-secondary-700);
}

.relationship-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.relationship-link i {
    flex-shrink: 0;
    color: var(--color-secondary-500);
}

.relationship-link-target {
    color: var(--color-primary-600);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    /* Single line with ellipsis; ensure at least ~3 words visible */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 28ch;
    flex: 1 1 0;
}

.relationship-link-target:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

[data-theme="dark"] .relationship-link-target {
    color: var(--color-primary-400);
}

[data-theme="dark"] .relationship-link-target:hover {
    color: var(--color-primary-300);
}

.relationship-breadcrumb {
    font-size: 0.75rem;
    color: var(--color-secondary-500);
    margin-top: 0.25rem;
    line-height: 1.4;
    /* Max two lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .relationship-breadcrumb {
    color: var(--color-secondary-400);
}

/* KPI Detail Page Relationship */
.kpi-detail-relationship {
    margin-top: var(--space-3);
}

.kpi-detail-relationship .relationship-breadcrumb {
    font-size: 0.875rem;
    color: var(--color-secondary-600);
}

.kpi-detail-relationship .relationship-breadcrumb a {
    color: var(--color-primary-600);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.kpi-detail-relationship .relationship-breadcrumb a:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

[data-theme="dark"] .kpi-detail-relationship .relationship-breadcrumb {
    color: var(--color-secondary-300);
}

[data-theme="dark"] .kpi-detail-relationship .relationship-breadcrumb a {
    color: var(--color-primary-400);
}

[data-theme="dark"] .kpi-detail-relationship .relationship-breadcrumb a:hover {
    color: var(--color-primary-300);
}

.kpi-card-gauge {
    display: flex;
    justify-content: center;
    margin: var(--space-6) 0;
}

.progress-gauge {
    position: relative;
    width: 120px;
    height: 120px;
}

.progress-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-gauge-bg {
    fill: none;
    stroke: var(--color-secondary-200);
    stroke-width: 8;
}

[data-theme="dark"] .progress-gauge-bg {
    stroke: var(--color-secondary-700);
}

.progress-gauge-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-gauge-on_track .progress-gauge-fill { stroke: var(--status-on-track); }
.progress-gauge-at_risk .progress-gauge-fill { stroke: var(--status-at-risk); }
.progress-gauge-behind .progress-gauge-fill { stroke: var(--status-behind); }
.progress-gauge-completed .progress-gauge-fill { stroke: var(--status-completed); }

.progress-gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-gauge-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .progress-gauge-number {
    color: var(--color-secondary-100);
}

.progress-gauge-symbol {
    font-size: var(--text-sm);
    color: var(--color-secondary-500);
}

.kpi-card-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.kpi-value-item {
    text-align: center;
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .kpi-value-item {
    background: var(--color-secondary-700);
}

.kpi-value-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.kpi-value-number {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .kpi-value-number {
    color: var(--color-secondary-100);
}

.kpi-card-trend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
}

.trend-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.trend-up { color: var(--status-on-track); }
.trend-down { color: var(--status-behind); }
.trend-neutral { color: var(--color-secondary-500); }

.kpi-frequency {
    font-weight: 500;
}

/* Initiative Card - Redesigned - EXACT MATCH TO IMAGE */
.initiatives-grid .initiative-card {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: auto !important;
}

[data-theme="dark"] .initiative-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

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

/* Blue Header - EXACT MATCH */
.initiatives-grid .initiative-card .initiative-card-header {
    background: #2563eb !important;
    color: white !important;
    padding: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
}

.initiative-card-header .initiative-card-title {
    flex: 1;
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 600;
    color: white;
}

.initiative-card-header .initiative-card-title a {
    color: white;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.initiative-card-header .initiative-card-title a:hover {
    opacity: 0.9;
}

.initiative-card-header .initiative-card-code {
    font-size: var(--text-xs);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .initiative-card-header {
    background: var(--color-primary-700);
}

/* White Body - EXACT MATCH */
.initiatives-grid .initiative-card .initiative-card-body {
    padding: 20px !important;
    background: white !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 !important;
}

.initiatives-grid .initiative-card .initiative-card-body > * {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

[data-theme="dark"] .initiative-card-body {
    background: var(--color-secondary-800);
}

/* Info Section with Icons - EXACT MATCH */
.initiatives-grid .initiative-card .initiative-info-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.initiatives-grid .initiative-card .initiative-info-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.initiative-info-icon {
    color: var(--color-secondary-500);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.initiative-info-text {
    font-size: var(--text-sm);
    color: var(--color-secondary-900);
    font-weight: 500;
}

[data-theme="dark"] .initiative-info-text {
    color: var(--color-secondary-100);
}

/* Description - EXACT MATCH */
.initiatives-grid .initiative-card .initiative-description {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.initiatives-grid .initiative-card .initiative-description-text {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

[data-theme="dark"] .initiative-description-text {
    color: var(--color-secondary-400);
}

/* Goals Section - EXACT MATCH */
.initiatives-grid .initiative-card .initiative-goals-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.initiatives-grid .initiative-card .initiative-section-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.initiative-goals-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.initiative-goal-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 500;
}

[data-theme="dark"] .initiative-goal-badge {
    background: var(--color-primary-900);
    color: var(--color-primary-200);
}

/* Progress Section - EXACT MATCH */
.initiatives-grid .initiative-card .initiative-progress-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.initiatives-grid .initiative-card .initiative-progress-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.initiative-progress-percentage {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .initiative-progress-percentage {
    color: var(--color-secondary-100);
}

.initiative-progress-bar {
    width: 100%;
    height: 12px;
    background: var(--color-secondary-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

[data-theme="dark"] .initiative-progress-bar {
    background: var(--color-secondary-700);
}

.initiative-progress-fill {
    height: 100%;
    background: var(--color-success-main);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

/* Metrics Section - EXACT MATCH */
.initiatives-grid .initiative-card .initiative-metrics-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.initiatives-grid .initiative-card .initiative-metrics-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
}

.initiative-metric-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Field Value - Label Style (like "Revenue Growth") */
.initiative-metric-item .field-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #3b82f6;
    margin: 0;
}

[data-theme="dark"] .initiative-metric-item .field-value {
    color: var(--color-primary-400);
}

/* Metric Value - Actual Value Style (like "SAR 480,000") */
.initiative-metric-item .metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-secondary-900);
}

.initiative-metric-item .metric-value.metric-actual {
    color: #3b82f6;
}

[data-theme="dark"] .initiative-metric-item .metric-value {
    color: var(--color-secondary-100);
}

[data-theme="dark"] .initiative-metric-item .metric-value.metric-actual {
    color: var(--color-primary-400);
}

/* Footer with Status Badges and Priority - EXACT MATCH */
.initiatives-grid .initiative-card .initiative-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: white !important;
    margin: 0 !important;
}

[data-theme="dark"] .initiative-card-footer {
    border-top-color: var(--color-secondary-700);
    background: var(--color-secondary-800);
}

.initiative-status-badges {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.initiative-status-badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.initiative-risk-low {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.initiative-risk-medium {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.initiative-risk-high {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.initiative-status-on_track {
    background: var(--status-on-track);
    color: white;
}

.initiative-status-at_risk {
    background: var(--status-at-risk);
    color: white;
}

.initiative-status-behind {
    background: var(--status-behind);
    color: white;
}

.initiative-priority-badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
}

/* RTL Support */
[dir="rtl"] .initiative-card-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .initiative-info-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .initiative-card-footer {
    flex-direction: row-reverse;
}

[dir="rtl"] .initiative-status-badges {
    flex-direction: row-reverse;
}

/* Responsive */
@media (max-width: 768px) {
    .initiative-card-header {
        padding: var(--space-4);
    }

    .initiative-card-body {
        padding: var(--space-4);
    }

    .initiative-card-footer {
        padding: var(--space-3) var(--space-4);
        flex-direction: column;
        align-items: flex-start;
    }

    .initiative-metrics-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .initiative-status-badges {
        width: 100%;
    }
}

.initiative-priority {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-high {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.priority-medium {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.priority-low {
    background: var(--color-secondary-100);
    color: var(--color-secondary-600);
}

.initiative-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: var(--color-secondary-900);
}

[data-theme="dark"] .initiative-card-title {
    color: var(--color-secondary-100);
}

.initiative-card-timeline {
    margin-bottom: var(--space-4);
}

.timeline-bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--color-secondary-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

[data-theme="dark"] .timeline-bar {
    background: var(--color-secondary-700);
}

.timeline-progress {
    height: 100%;
    background: var(--color-primary-500);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.timeline-today {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    background: var(--color-danger-main);
}

.timeline-dates {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-secondary-500);
}

.initiative-card-budget {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .initiative-card-budget {
    background: var(--color-secondary-700);
}

.budget-item {
    flex: 1;
}

.budget-label {
    display: block;
    font-size: 11px;
    color: var(--color-secondary-500);
    margin-bottom: 4px;
}

.budget-value {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .budget-value {
    color: var(--color-secondary-100);
}

.budget-over { color: var(--color-danger-main); }
.budget-under { color: var(--status-on-track); }

.initiative-card-milestones {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
}

.milestones-label {
    color: var(--color-secondary-500);
    font-weight: 600;
}

.milestones-dots {
    display: flex;
    gap: 4px;
    flex: 1;
}

.milestone-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-secondary-300);
}

[data-theme="dark"] .milestone-dot {
    border-color: var(--color-secondary-600);
}

.milestone-completed {
    background: var(--status-on-track);
    border-color: var(--status-on-track);
}

.milestone-in_progress {
    background: var(--color-warning-main);
    border-color: var(--color-warning-main);
}

.milestones-count {
    font-weight: 600;
    color: var(--color-secondary-700);
}

[data-theme="dark"] .milestones-count {
    color: var(--color-secondary-300);
}

/* ============================================
   DASHBOARD COMPONENTS
   ============================================ */

.dashboard-page {
    width: 100%;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .page-header {
    border-bottom-color: var(--color-secondary-700);
}

.page-header-content {
    flex: 1;
}

.page-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-secondary-900);
    margin-bottom: var(--space-2);
    line-height: 1.2;
}

[data-theme="dark"] .page-title {
    color: var(--color-secondary-100);
}

.page-subtitle {
    font-size: var(--text-base);
    color: var(--color-secondary-600);
    line-height: 1.5;
}

[data-theme="dark"] .page-subtitle {
    color: var(--color-secondary-400);
}

.page-header-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-6);
}

/* Stat Cards */
.stat-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .stat-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

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

.dashboard-grid > .stat-card {
    grid-column: span 3;
    min-height: 160px;
}

.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
}

.stat-card-icon-primary {
    background: var(--color-primary-100);
    color: var(--color-primary-600);
}

.stat-card-icon-success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.stat-card-icon-warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.stat-card-icon-danger {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.stat-card-icon-info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.stat-card-trend {
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-md);
}

.stat-card-trend-up {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.stat-card-trend-down {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.stat-card-trend-neutral {
    background: var(--color-secondary-100);
    color: var(--color-secondary-600);
}

.stat-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.stat-card-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-secondary-900);
    margin-bottom: var(--space-2);
    line-height: 1.1;
}

[data-theme="dark"] .stat-card-value {
    color: var(--color-secondary-100);
}

.stat-card-label {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    font-weight: 500;
    line-height: 1.4;
}

[data-theme="dark"] .stat-card-label {
    color: var(--color-secondary-400);
}

/* Stat Card Variants */
.stat-card-primary { border-inline-start: 4px solid var(--color-primary-500); }
.stat-card-success { border-inline-start: 4px solid var(--color-success-main); }
.stat-card-warning { border-inline-start: 4px solid var(--color-warning-main); }
.stat-card-info { border-inline-start: 4px solid var(--color-info-main); }

/* Dashboard Widgets */
.dashboard-widget {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

[data-theme="dark"] .dashboard-widget {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.dashboard-widget:hover {
    box-shadow: var(--shadow-md);
}

.dashboard-widget-full {
    grid-column: 1 / -1;
}

.dashboard-widget-half {
    grid-column: span 6;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .widget-header {
    border-bottom-color: var(--color-secondary-700);
}

.widget-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .widget-title {
    color: var(--color-secondary-100);
}

/* Health Score */
.health-score {
    text-align: center;
}

.health-score-circle {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 0.5rem;
}

.health-score-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.health-score-bg {
    fill: none;
    stroke: var(--color-secondary-200);
    stroke-width: 12;
}

[data-theme="dark"] .health-score-bg {
    stroke: var(--color-secondary-700);
}

.health-score-fill {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.health-score-excellent { stroke: var(--status-on-track); }
.health-score-good { stroke: var(--color-primary-500); }
.health-score-fair { stroke: var(--status-at-risk); }
.health-score-poor { stroke: var(--status-behind); }

.health-score-value {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 80px;
    line-height: 1;
    z-index: 1;
}

.health-score-number {
    display: block;
    font-size: 48px;
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .health-score-number {
    color: var(--color-secondary-100);
}

/* Label inside circle (legacy); prefer .health-score-caption below circle */
.health-score-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-secondary-500);
    margin-top: 4px;
}

/* Caption below circle - prevents label overlapping the ring */
.health-score-caption {
    margin: 0 0 var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-secondary-500);
    text-align: center;
    line-height: 1.35;
}

[data-theme="dark"] .health-score-caption {
    color: var(--color-secondary-400);
}

.health-score-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
}

.health-score-item {
    text-align: center;
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .health-score-item {
    background: var(--color-secondary-700);
}

.health-score-item-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    margin-bottom: 4px;
}

.health-score-item-value {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .health-score-item-value {
    color: var(--color-secondary-100);
}

/* ===== Health Score Widget (dashboard) - layout and visuals ===== */
.health-score-widget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    text-align: center;
    padding: 1.5rem;
    background: var(--color-secondary-50);
    border-radius: 16px;
    border: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .health-score-widget {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.health-score-widget .health-score-main {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.health-score-widget .health-score-circle {
    margin-bottom: 0.25rem;
}

.health-score-widget .health-score-caption {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-secondary-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[data-theme="dark"] .health-score-widget .health-score-caption {
    color: var(--color-secondary-400);
}

/* Center number color by tier */
.health-score-widget[data-tier="excellent"] .health-score-number { color: var(--status-on-track, #22c55e); }
.health-score-widget[data-tier="good"] .health-score-number { color: var(--color-primary-600, #2563eb); }
.health-score-widget[data-tier="fair"] .health-score-number { color: var(--color-warning-main, #f59e0b); }
.health-score-widget[data-tier="poor"] .health-score-number { color: var(--color-danger-main, #ef4444); }

[data-theme="dark"] .health-score-widget[data-tier="excellent"] .health-score-number { color: var(--status-on-track); }
[data-theme="dark"] .health-score-widget[data-tier="good"] .health-score-number { color: var(--color-primary-400); }
[data-theme="dark"] .health-score-widget[data-tier="fair"] .health-score-number { color: var(--color-warning-main); }
[data-theme="dark"] .health-score-widget[data-tier="poor"] .health-score-number { color: var(--color-danger-main); }

.health-score-widget .health-score-breakdown {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    text-align: start;
}

[dir="rtl"] .health-score-widget .health-score-breakdown {
    text-align: end;
}

.health-score-widget .health-score-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    text-align: start;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-secondary-200);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[dir="rtl"] .health-score-widget .health-score-item {
    text-align: end;
}

[data-theme="dark"] .health-score-widget .health-score-item {
    background: var(--color-secondary-700);
    border-color: var(--color-secondary-600);
}

.health-score-widget .health-score-item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
}

.health-score-widget .health-score-item-icon svg {
    width: 20px;
    height: 20px;
}

.health-score-widget .health-score-item-excellent .health-score-item-icon { background: var(--status-on-track); }
.health-score-widget .health-score-item-good .health-score-item-icon { background: var(--color-primary-500); }
.health-score-widget .health-score-item-fair .health-score-item-icon { background: var(--color-warning-main); }
.health-score-widget .health-score-item-poor .health-score-item-icon { background: var(--color-danger-main); }

.health-score-widget .health-score-item-content {
    min-width: 0;
}

.health-score-widget .health-score-item-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-secondary-500);
    margin-bottom: 2px;
}

[data-theme="dark"] .health-score-widget .health-score-item-label {
    color: var(--color-secondary-400);
}

.health-score-widget .health-score-item-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.health-score-widget .health-score-item-excellent .health-score-item-value { color: var(--status-on-track); }
.health-score-widget .health-score-item-good .health-score-item-value { color: var(--color-primary-600); }
.health-score-widget .health-score-item-fair .health-score-item-value { color: var(--color-warning-main); }
.health-score-widget .health-score-item-poor .health-score-item-value { color: var(--color-danger-main); }

[data-theme="dark"] .health-score-widget .health-score-item-excellent .health-score-item-value { color: var(--status-on-track); }
[data-theme="dark"] .health-score-widget .health-score-item-good .health-score-item-value { color: var(--color-primary-400); }

.health-score-widget .health-score-no-breakdown {
    margin: 0;
    padding: 1rem;
    font-size: var(--text-sm);
    color: var(--color-secondary-500);
    text-align: center;
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .health-score-widget {
        flex-direction: column;
        padding: 1.25rem;
        gap: 1.5rem;
    }

    .health-score-widget .health-score-breakdown {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

/* Objectives List */
.objectives-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.objective-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .objective-item {
    background: var(--color-secondary-700);
}

.objective-info { flex: 1; }

.objective-name {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-secondary-900);
}

[data-theme="dark"] .objective-name {
    color: var(--color-secondary-100);
}

.objective-progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.progress-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-600);
    min-width: 50px;
}

/* At-Risk List */
.at-risk-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.at-risk-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-danger-light);
    border-radius: var(--radius-lg);
    border-inline-start: 4px solid var(--color-danger-main);
}

.at-risk-indicator {
    width: 8px;
    height: 8px;
    background: var(--color-danger-main);
    border-radius: var(--radius-full);
    animation: pulse 2s infinite;
}

.at-risk-info { flex: 1; }

.at-risk-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin-bottom: 4px;
}

.at-risk-status {
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
}

/* Deadlines List */
.deadlines-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.deadline-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .deadline-item {
    background: var(--color-secondary-700);
}

.deadline-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary-100);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

[data-theme="dark"] .deadline-date {
    background: var(--color-primary-900);
}

.deadline-day {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary-700);
}

[data-theme="dark"] .deadline-day {
    color: var(--color-primary-300);
}

.deadline-month {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-primary-600);
}

[data-theme="dark"] .deadline-month {
    color: var(--color-primary-400);
}

.deadline-info { flex: 1; }

.deadline-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin-bottom: 4px;
}

[data-theme="dark"] .deadline-name {
    color: var(--color-secondary-100);
}

.deadline-status {
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
}

/* Activity Feed */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .activity-item {
    background: var(--color-secondary-700);
}

.activity-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-100);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    color: var(--color-primary-600);
}

[data-theme="dark"] .activity-icon {
    background: var(--color-primary-900);
    color: var(--color-primary-400);
}

.activity-content { flex: 1; }

.activity-text {
    font-size: var(--text-sm);
    color: var(--color-secondary-700);
    margin-bottom: 4px;
}

[data-theme="dark"] .activity-text {
    color: var(--color-secondary-300);
}

.activity-time {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-10) var(--space-5);
    color: var(--color-secondary-500);
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-3);
    opacity: 0.5;
    color: var(--color-secondary-400);
}

.empty-state-icon svg {
    width: 100%;
    height: 100%;
}

.empty-state-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-secondary-700);
    margin-bottom: var(--space-2);
}

[data-theme="dark"] .empty-state-title {
    color: var(--color-secondary-300);
}

.empty-state-description {
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

.status-badge-on_track {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.status-badge-at_risk {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.status-badge-behind {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.status-badge-not_started {
    background: var(--color-secondary-100);
    color: var(--color-secondary-600);
}

.status-badge-completed {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

/* Badge Component */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

.badge-primary {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.badge-secondary {
    background: var(--color-secondary-100);
    color: var(--color-secondary-600);
}

.badge-success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.badge-danger {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.badge-info {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

/* Status-based badges */
.badge-on_track {
    background: rgba(34, 197, 94, 0.1);
    color: var(--status-on-track);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-at_risk {
    background: rgba(245, 158, 11, 0.1);
    color: var(--status-at-risk);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-behind {
    background: rgba(239, 68, 68, 0.1);
    color: var(--status-behind);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-completed {
    background: rgba(59, 130, 246, 0.1);
    color: var(--status-completed);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-not_started {
    background: rgba(148, 163, 184, 0.1);
    color: var(--status-not-started);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .badge-on_track {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
}

[data-theme="dark"] .badge-at_risk {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .badge-behind {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="dark"] .badge-completed {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .badge-not_started {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.4);
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

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

/* ============================================
   PAGE CONTAINER & FILTERS
   ============================================ */

.page-container {
    width: 100%;
}

.page-content {
    margin-top: var(--space-6);
}

/* Filters Bar - Modern Design */
.filters-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-5);
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .filters-bar {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.filters-group {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
    width: 100%;
}

.filters-group > .filter-item {
    flex: 1 1 0%;
    min-width: 0;
    width: 0;
}

.filters-group .btn {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: center;
}

.filter-item {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    width: 0;
    max-width: 100%;
}

.filter-item .form-select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    flex: 1;
}

.filters-results {
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    font-weight: 500;
}

[data-theme="dark"] .filters-results {
    color: var(--color-secondary-400);
}

.results-count {
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .filters-group {
        flex-wrap: wrap;
    }
    
    .filter-item {
        flex: 1 1 calc(50% - var(--space-2));
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-group {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .filter-item {
        flex: 1 1 100%;
        min-width: 0;
    }

    .filter-item .form-select {
        width: 100%;
    }

    .filters-results {
        width: 100%;
        justify-content: center;
        padding-top: var(--space-2);
        border-top: 1px solid var(--color-secondary-200);
        margin-top: var(--space-2);
    }

    [data-theme="dark"] .filters-results {
        border-top-color: var(--color-secondary-700);
    }
}

@media (max-width: 480px) {
    .filters-bar {
        padding: var(--space-4);
    }

    .filters-group {
        gap: var(--space-3);
    }
    
    .filter-item {
        flex: 1 1 100%;
    }
}

.form-select {
    padding: var(--space-2) var(--space-3);
    padding-inline-end: var(--space-8);
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-lg);
    background: white;
    color: var(--color-secondary-700);
    font-size: var(--text-sm);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

[dir="rtl"] .form-select {
    background-position: left 8px center;
}

[data-theme="dark"] .form-select {
    background-color: var(--color-secondary-700);
    border-color: var(--color-secondary-600);
    color: var(--color-secondary-200);
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select-sm {
    padding: var(--space-2) var(--space-3);
    padding-inline-end: var(--space-8);
    font-size: var(--text-sm);
    height: auto;
    min-height: 36px;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-secondary-700);
    cursor: pointer;
}

[data-theme="dark"] .form-checkbox {
    color: var(--color-secondary-300);
}

.form-checkbox-sm {
    font-size: var(--text-xs);
}

/* Fix KPI leading checkbox truncation */
.form-checkbox-sm span {
    white-space: nowrap;
}

.form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary-500);
}

/* Grids */
/* Plan Card - Modern Design */
.plan-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 4px;
    height: 100%;
    background: var(--color-primary-500);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.plan-card:hover::before {
    opacity: 1;
}

[data-theme="dark"] .plan-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.plan-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
    border-color: var(--color-primary-200);
}

[data-theme="dark"] .plan-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    border-color: var(--color-primary-700);
}

.plan-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}

.plan-card-title-section {
    flex: 1;
}

.plan-card-title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

.plan-card-title a {
    color: var(--color-secondary-900);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.plan-card-title a i {
    color: var(--color-primary-500);
    flex-shrink: 0;
}

.plan-card-title a:hover {
    color: var(--color-primary-600);
}

.plan-card-title a:hover i {
    color: var(--color-primary-600);
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

[data-theme="dark"] .plan-card-title a {
    color: var(--color-secondary-100);
}

[data-theme="dark"] .plan-card-title a:hover {
    color: var(--color-primary-400);
}

.plan-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
}

[data-theme="dark"] .plan-card-meta {
    color: var(--color-secondary-400);
}

.plan-card-status {
    flex-shrink: 0;
}

.plan-card-body {
    flex: 1;
    margin-bottom: var(--space-4);
}

.plan-card-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin-bottom: var(--space-5);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.8em;
}

.plan-card-description-empty {
    color: var(--color-secondary-400);
    font-style: italic;
}

[data-theme="dark"] .plan-card-description {
    color: var(--color-secondary-400);
}

[data-theme="dark"] .plan-card-description-empty {
    color: var(--color-secondary-500);
}

.plan-card-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
}

.plan-card-tags .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.badge-sm {
    font-size: var(--text-xs);
    padding: 4px 10px;
}

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-inline-end: 6px;
    vertical-align: middle;
}

.plan-card-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-4);
    margin-top: auto;
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .plan-card-footer {
    border-top-color: var(--color-secondary-700);
}

.plan-card-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
}

.plan-card-actions .btn {
    white-space: nowrap;
}

.btn-text-sm {
    display: inline;
}

@media (max-width: 480px) {
    .plan-card-actions .btn-text-sm {
        display: none;
    }
}

.objectives-grid,
.kpis-grid,
.initiatives-grid,
.plans-grid {
    display: grid;
    gap: var(--space-6);
}

.objectives-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

@media (max-width: 1024px) {
    .objectives-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

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

@media (max-width: 480px) {
    .objectives-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.kpis-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.initiatives-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1024px) {
    .initiatives-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .initiatives-grid {
        grid-template-columns: 1fr !important;
    }
}

.plans-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

@media (max-width: 1024px) {
    .plans-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

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

@media (max-width: 480px) {
    .plans-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* Initiative Card Footer */
.initiative-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .initiative-card-footer {
    border-top-color: var(--color-secondary-700);
}

/* KPI Card Footer */
.kpi-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .kpi-card-footer {
    border-top-color: var(--color-secondary-700);
}

/* ============================================
   RISK REGISTER STYLES
   ============================================ */

/* Risk Grid */
.risks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

@media (max-width: 767px) {
    .risks-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* Risk Card */
.risk-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .risk-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.risk-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary-300);
}

[data-theme="dark"] .risk-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary-600);
}

/* Risk Card Header */
.risk-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.risk-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.risk-card-code {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-500);
    font-family: 'Monaco', 'Menlo', monospace;
    background: var(--color-secondary-100);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

[data-theme="dark"] .risk-card-code {
    background: var(--color-secondary-700);
    color: var(--color-secondary-300);
}

.risk-category-badge {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid;
}

/* Risk Card Body */
.risk-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.risk-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
    line-height: 1.4;
}

[data-theme="dark"] .risk-card-title {
    color: var(--color-secondary-100);
}

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

.risk-card-link:hover {
    color: var(--color-primary-600);
}

.risk-card-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.6;
    margin: 0;
}

[data-theme="dark"] .risk-card-description {
    color: var(--color-secondary-400);
}

/* Risk Score Display */
.risk-score-display {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .risk-score-display {
    background: var(--color-secondary-700);
}

.risk-score-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-xl);
    flex-shrink: 0;
    position: relative;
}

.risk-score-circle.risk-score-low {
    background: linear-gradient(135deg, #dcfce7, #86efac);
    color: #15803d;
    border: 2px solid #22c55e;
}

.risk-score-circle.risk-score-medium {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 2px solid #f59e0b;
}

.risk-score-circle.risk-score-high {
    background: linear-gradient(135deg, #fee2e2, #fca5a5);
    color: #991b1b;
    border: 2px solid #ef4444;
}

.risk-score-circle.risk-score-critical {
    background: linear-gradient(135deg, #fce7f3, #f9a8d4);
    color: #9f1239;
    border: 2px solid #ec4899;
}

.risk-score-number {
    font-size: var(--text-xl);
    font-weight: 700;
}

.risk-score-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.risk-score-label {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .risk-score-label {
    color: var(--color-secondary-400);
}

.risk-score-level {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-700);
}

[data-theme="dark"] .risk-score-level {
    color: var(--color-secondary-300);
}

/* Risk Card Badges */
.risk-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.escalation-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.escalation-badge.escalation-low {
    background: #dcfce7;
    color: #15803d;
}

.escalation-badge.escalation-medium {
    background: #fef3c7;
    color: #92400e;
}

.escalation-badge.escalation-high {
    background: #fee2e2;
    color: #991b1b;
}

.escalation-badge.escalation-critical {
    background: #fce7f3;
    color: #9f1239;
}

[data-theme="dark"] .escalation-badge.escalation-low {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

[data-theme="dark"] .escalation-badge.escalation-medium {
    background: rgba(245, 158, 11, 0.2);
    color: #fde68a;
}

[data-theme="dark"] .escalation-badge.escalation-high {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

[data-theme="dark"] .escalation-badge.escalation-critical {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
}

/* Risk Card Footer Meta */
.risk-card-footer-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-secondary-200);
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .risk-card-footer-meta {
    border-top-color: var(--color-secondary-700);
    color: var(--color-secondary-400);
}

.risk-card-owner,
.risk-card-date {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Risk Card Actions */
.risk-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .risk-card-actions {
    border-top-color: var(--color-secondary-700);
}

/* Strategy Maps Grid */
.strategy-maps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

@media (max-width: 767px) {
    .strategy-maps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* Strategy Map Card */
.strategy-map-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .strategy-map-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.strategy-map-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary-300);
}

[data-theme="dark"] .strategy-map-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary-600);
}

/* Strategy Map Card Header */
.strategy-map-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.strategy-map-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.strategy-map-badge,
.strategy-map-plan-badge {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-200);
}

[data-theme="dark"] .strategy-map-badge,
[data-theme="dark"] .strategy-map-plan-badge {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-primary-300);
    border-color: var(--color-primary-700);
}

.strategy-map-plan-badge {
    background: var(--color-secondary-100);
    color: var(--color-secondary-700);
    border-color: var(--color-secondary-300);
}

[data-theme="dark"] .strategy-map-plan-badge {
    background: var(--color-secondary-700);
    color: var(--color-secondary-300);
    border-color: var(--color-secondary-600);
}

/* Strategy Map Card Body */
.strategy-map-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.strategy-map-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
    line-height: 1.4;
}

[data-theme="dark"] .strategy-map-card-title {
    color: var(--color-secondary-100);
}

.strategy-map-card-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.strategy-map-card-link:hover {
    color: var(--color-primary-600);
}

.strategy-map-card-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.6;
    margin: 0;
}

[data-theme="dark"] .strategy-map-card-description {
    color: var(--color-secondary-400);
}

/* Strategy Map Card Metrics */
.strategy-map-card-metrics {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .strategy-map-card-metrics {
    background: var(--color-secondary-700);
}

.strategy-map-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}

.strategy-map-stat-label {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    font-weight: 500;
}

[data-theme="dark"] .strategy-map-stat-label {
    color: var(--color-secondary-400);
}

.strategy-map-stat-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-700);
    margin-inline-start: auto;
}

[data-theme="dark"] .strategy-map-stat-value {
    color: var(--color-secondary-300);
}

/* Strategy Map Card Footer Meta */
.strategy-map-card-footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-secondary-200);
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .strategy-map-card-footer-meta {
    border-top-color: var(--color-secondary-700);
    color: var(--color-secondary-400);
}

.strategy-map-card-date {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Strategy Map Card Actions */
.strategy-map-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .strategy-map-card-actions {
    border-top-color: var(--color-secondary-700);
}

/* Enhanced Filters */
/* Filter item for input fields with labels (different use case) */
.filter-item-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
}

.filter-label {
    position: absolute;
    inset-inline-start: var(--space-3);
    color: var(--color-secondary-400);
    pointer-events: none;
    z-index: 1;
}

.filter-item-input .form-input {
    padding-inline-start: var(--space-9);
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1279px) {
    .dashboard-grid > .stat-card {
        grid-column: span 4;
    }
}

@media (max-width: 1023px) {
    .dashboard-widget-half {
        grid-column: 1 / -1;
    }
    
    .dashboard-grid > .stat-card {
        grid-column: span 6;
    }
    
    .page-header {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .page-header {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .page-title {
        font-size: var(--text-2xl);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .dashboard-grid > .stat-card {
        grid-column: span 1;
    }

    .dashboard-widget {
        padding: var(--space-4);
    }

    .kpi-card-values {
        grid-template-columns: 1fr;
    }

    .health-score-breakdown {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card-value {
        font-size: 28px;
    }
    
    /* Responsive Grids */
    .objectives-grid,
    .kpis-grid,
    .initiatives-grid,
    .plans-grid {
        grid-template-columns: 1fr;
    }
    
    .filters-bar {
        padding: var(--space-3);
    }
    
    .filters-group {
        width: 100%;
    }
    
    .form-select {
        flex: 1;
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .filters-group {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-item {
        width: 100% !important;
        flex: 0 0 auto;
    }
    
    .form-select {
        width: 100%;
        min-width: 0;
    }

    /* M-011: Keep button text visible on mobile, just shrink font */
    .page-header .btn span:not(.btn-icon) {
        display: inline;
        font-size: var(--text-xs);
    }
}

/* ============================================
   DETAIL PAGE COMPONENTS
   ============================================ */

/* Detail Card */
.detail-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

[data-theme="dark"] .detail-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .detail-card-header {
    border-bottom-color: var(--color-secondary-700);
}

.detail-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .detail-card-title {
    color: var(--color-secondary-100);
}

.detail-card-body {
    padding-top: var(--space-4);
}

/* Info Tags Container - Tag Style Layout */
.info-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.info-tag {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

[data-theme="dark"] .info-tag {
    background: var(--color-secondary-700);
    border-color: var(--color-secondary-600);
}

.info-tag:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: var(--color-primary-300);
}

[data-theme="dark"] .info-tag:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary-600);
}

.info-tag-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: white;
    color: var(--color-primary-600);
    flex-shrink: 0;
}

[data-theme="dark"] .info-tag-icon {
    background: var(--color-secondary-800);
    color: var(--color-primary-400);
}

.info-tag-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    min-width: 0;
}

.info-tag-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .info-tag-label {
    color: var(--color-secondary-400);
}

.info-tag-value {
    font-size: var(--text-sm);
    color: var(--color-secondary-900);
    font-weight: 600;
    word-break: break-word;
}

[data-theme="dark"] .info-tag-value {
    color: var(--color-secondary-100);
}

/* Tag Variants with Color Coding */
.info-tag-code .info-tag-icon {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.info-tag-status .info-tag-icon {
    background: var(--color-success-light);
    color: var(--color-success-main);
}

.info-tag-objective .info-tag-icon {
    background: var(--color-info-light);
    color: var(--color-info-main);
}

.info-tag-type .info-tag-icon {
    background: var(--color-warning-light);
    color: var(--color-warning-main);
}

.info-tag-unit .info-tag-icon {
    background: var(--color-secondary-200);
    color: var(--color-secondary-700);
}

.info-tag-direction .info-tag-icon {
    background: var(--color-secondary-200);
    color: var(--color-secondary-700);
}

.info-tag-frequency .info-tag-icon {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.info-tag-date .info-tag-icon {
    background: var(--color-secondary-200);
    color: var(--color-secondary-700);
}

.info-tag-plan .info-tag-icon {
    background: var(--color-info-light);
    color: var(--color-info-main);
}

.info-tag-perspective .info-tag-icon {
    background: var(--color-warning-light);
    color: var(--color-warning-main);
}

/* Tag Link */
.info-tag-link {
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.info-tag-link:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

[data-theme="dark"] .info-tag-link {
    color: var(--color-primary-400);
}

[data-theme="dark"] .info-tag-link:hover {
    color: var(--color-primary-300);
}

.info-tag-link-code {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    font-weight: 500;
}

/* Legacy Info Grid (for other pages) */
.info-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-4);
}

.info-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-secondary-100);
}

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

[data-theme="dark"] .info-item {
    border-bottom-color: var(--color-secondary-700);
}

.info-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-secondary-600);
    flex-shrink: 0;
    min-width: 140px;
}

[data-theme="dark"] .info-label {
    color: var(--color-secondary-400);
}

.info-value {
    font-size: var(--text-sm);
    color: var(--color-secondary-900);
    font-weight: 500;
    text-align: end;
    flex: 1;
}

/* Benefit owner (and similar "person" values) should align to start in LTR/RTL */
.info-value-owner {
    text-align: start;
}

.info-value-owner .owner-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
}

.info-value-owner .owner-details {
    text-align: start;
}

[data-theme="dark"] .info-value {
    color: var(--color-secondary-100);
}

.info-description {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .info-description {
    border-top-color: var(--color-secondary-700);
}

.info-description .info-value {
    margin-top: var(--space-2);
    line-height: 1.6;
    color: var(--color-secondary-700);
}

[data-theme="dark"] .info-description .info-value {
    color: var(--color-secondary-300);
}

/* Page Header Breadcrumb */
.page-header-breadcrumb {
    margin-bottom: var(--space-2);
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover {
    color: var(--color-primary-600);
}

[data-theme="dark"] .breadcrumb-link {
    color: var(--color-secondary-400);
}

[data-theme="dark"] .breadcrumb-link:hover {
    color: var(--color-primary-400);
}

/* Perspectives Grid */
.perspectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.perspective-card {
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all 0.2s ease;
}

[data-theme="dark"] .perspective-card {
    background: var(--color-secondary-750);
    border-color: var(--color-secondary-700);
}

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

[data-theme="dark"] .perspective-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.perspective-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.perspective-card-title-section {
    flex: 1;
}

.perspective-card-title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--color-secondary-900);
}

[data-theme="dark"] .perspective-card-title {
    color: var(--color-secondary-100);
}

.perspective-card-order {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
}

.perspective-card-body {
    margin-bottom: var(--space-3);
}

.perspective-card-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.5;
}

[data-theme="dark"] .perspective-card-description {
    color: var(--color-secondary-400);
}

.perspective-card-footer {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .perspective-card-footer {
    border-top-color: var(--color-secondary-700);
}

/* Actions Grid */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-4);
}

.action-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
    color: inherit;
}

[data-theme="dark"] .action-card {
    background: var(--color-secondary-750);
    border-color: var(--color-secondary-700);
}

.action-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--color-primary-300);
}

[data-theme="dark"] .action-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary-600);
}

.action-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary-100);
    border-radius: var(--radius-lg);
    color: var(--color-primary-600);
    flex-shrink: 0;
}

[data-theme="dark"] .action-card-icon {
    background: var(--color-primary-900);
    color: var(--color-primary-400);
}

.action-card-content {
    flex: 1;
}

.action-card-title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--color-secondary-900);
}

[data-theme="dark"] .action-card-title {
    color: var(--color-secondary-100);
}

.action-card-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .action-card-description {
    color: var(--color-secondary-400);
}

.action-card i[data-lucide="chevron-right"] {
    color: var(--color-secondary-400);
    flex-shrink: 0;
}

[data-theme="dark"] .action-card i[data-lucide="chevron-right"] {
    color: var(--color-secondary-500);
}

/* Objective Progress Section */
.objective-progress-section {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .objective-progress-section {
    border-top-color: var(--color-secondary-700);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.progress-percentage {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .progress-percentage {
    color: var(--color-secondary-100);
}

/* KPI Item */
.kpis-list,
.initiatives-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.kpi-item,
.initiative-item {
    padding: var(--space-4);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

[data-theme="dark"] .kpi-item,
[data-theme="dark"] .initiative-item {
    background: var(--color-secondary-750);
    border-color: var(--color-secondary-700);
}

.kpi-item:hover,
.initiative-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

[data-theme="dark"] .kpi-item:hover,
[data-theme="dark"] .initiative-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kpi-item-header,
.initiative-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2);
    gap: var(--space-3);
}

/* Milestone Items */
.milestones-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.milestone-item {
    padding: var(--space-4);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

[data-theme="dark"] .milestone-item {
    background: var(--color-secondary-750);
    border-color: var(--color-secondary-700);
}

.milestone-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

[data-theme="dark"] .milestone-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.milestone-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2);
    gap: var(--space-3);
}

.milestone-item-title-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.milestone-item-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.milestone-item-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
    flex: 1;
    min-width: 0;
}

[data-theme="dark"] .milestone-item-title {
    color: var(--color-secondary-100);
}

/* Milestones Timeline */
.milestones-timeline-container {
    margin-bottom: var(--space-6);
    padding: var(--space-4) 0;
}

.milestones-timeline {
    position: relative;
    height: 80px;
    margin-bottom: var(--space-3);
}

.milestones-timeline-line {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-secondary-300);
    z-index: 1;
}

[data-theme="dark"] .milestones-timeline-line {
    background: var(--color-secondary-600);
}

.milestone-timeline-marker {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.milestone-timeline-diamond {
    width: 16px;
    height: 16px;
    background: var(--color-secondary-400);
    border: 2px solid white;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-theme="dark"] .milestone-timeline-diamond {
    border-color: var(--color-secondary-800);
}

.milestone-timeline-diamond:hover {
    transform: rotate(45deg) scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.milestone-diamond-pending {
    background: var(--color-warning-main);
    border-color: white;
}

.milestone-diamond-completed {
    background: var(--color-success-main);
    border-color: white;
}

[data-theme="dark"] .milestone-diamond-pending,
[data-theme="dark"] .milestone-diamond-completed {
    border-color: var(--color-secondary-800);
}

.milestone-timeline-date {
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
    font-weight: 500;
    white-space: nowrap;
    margin-top: var(--space-2);
}

[data-theme="dark"] .milestone-timeline-date {
    color: var(--color-secondary-400);
}

.milestones-timeline-dates {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    padding: 0 var(--space-2);
}

[data-theme="dark"] .milestones-timeline-dates {
    color: var(--color-secondary-400);
}

.milestone-timeline-date-marker {
    position: absolute;
    top: 50px;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-date-label {
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
    font-weight: 500;
    white-space: nowrap;
    padding: var(--space-1) var(--space-2);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .timeline-date-label {
    color: var(--color-secondary-300);
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.milestone-item-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.milestone-item-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.6;
    margin: var(--space-2) 0;
}

[data-theme="dark"] .milestone-item-description {
    color: var(--color-secondary-400);
}

.milestone-item-footer {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-secondary-200);
    min-height: 60px;
}

[data-theme="dark"] .milestone-item-footer {
    border-top-color: var(--color-secondary-700);
}

.milestone-item-status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
}

.milestone-item-diamond-container {
    position: absolute;
    top: var(--space-3);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    z-index: 2;
}

.milestone-completed-date {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
}

[data-theme="dark"] .milestone-completed-date {
    color: var(--color-secondary-400);
}

/* Icon-only button for milestone actions */
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-secondary-300);
    background: white;
    border-radius: var(--radius-md);
    color: var(--color-secondary-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-only:hover {
    background: var(--color-secondary-100);
    border-color: var(--color-secondary-400);
    color: var(--color-secondary-900);
}

.btn-icon-only.btn-danger {
    border-color: var(--color-danger-light);
    color: var(--color-danger-main);
}

.btn-icon-only.btn-danger:hover {
    background: var(--color-danger-light);
    border-color: var(--color-danger-main);
    color: var(--color-danger-dark);
}

[data-theme="dark"] .btn-icon-only {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-600);
    color: var(--color-secondary-300);
}

[data-theme="dark"] .btn-icon-only:hover {
    background: var(--color-secondary-700);
    border-color: var(--color-secondary-500);
    color: var(--color-secondary-100);
}

.kpi-item-title,
.initiative-item-title {
    font-size: var(--text-base);
    font-weight: 600;
    flex: 1;
}

.kpi-item-title a,
.initiative-item-title a {
    color: var(--color-secondary-900);
    text-decoration: none;
    transition: color 0.2s ease;
}

.kpi-item-title a:hover,
.initiative-item-title a:hover {
    color: var(--color-primary-600);
}

[data-theme="dark"] .kpi-item-title a,
[data-theme="dark"] .initiative-item-title a {
    color: var(--color-secondary-100);
}

[data-theme="dark"] .kpi-item-title a:hover,
[data-theme="dark"] .initiative-item-title a:hover {
    color: var(--color-primary-400);
}

.kpi-item-code {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-item-description,
.initiative-item-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.5;
    margin-top: var(--space-2);
}

[data-theme="dark"] .kpi-item-description,
[data-theme="dark"] .initiative-item-description {
    color: var(--color-secondary-400);
}

/* ============================================
   KPI DETAIL PAGE - REDESIGNED
   ============================================ */

/* KPI Detail Code */
.kpi-detail-code {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-inline-end: var(--space-3);
}

/* Objective Detail Hero Section */
.objective-detail-hero {
    margin-bottom: var(--space-8);
}

.objective-detail-hero-main {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .objective-detail-hero-main {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(15, 23, 42, 0.5) 100%);
    border-color: var(--color-secondary-700);
}

.objective-detail-gauge-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.objective-detail-gauge-label {
    text-align: center;
}

.objective-detail-gauge-wrapper .progress-gauge {
    width: 160px;
    height: 160px;
}

.objective-detail-gauge-wrapper .progress-gauge-number {
    font-size: 36px;
    font-weight: 700;
}

.objective-detail-gauge-wrapper .progress-gauge-symbol {
    font-size: var(--text-lg);
}

/* Objective Metrics Cards */
.objective-detail-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    flex: 1;
}

.objective-metric-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

[data-theme="dark"] .objective-metric-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

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

[data-theme="dark"] .objective-metric-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.objective-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    flex-shrink: 0;
}

.objective-metric-kpis .objective-metric-icon {
    background: var(--color-info-light);
    color: var(--color-info-main);
}

.objective-metric-initiatives .objective-metric-icon {
    background: var(--color-warning-light);
    color: var(--color-warning-main);
}

.objective-metric-status .objective-metric-icon {
    background: var(--color-secondary-100);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .objective-metric-icon {
    background: var(--color-secondary-700);
}

.objective-metric-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.objective-metric-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .objective-metric-label {
    color: var(--color-secondary-400);
}

.objective-metric-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-secondary-900);
    line-height: 1.2;
}

[data-theme="dark"] .objective-metric-value {
    color: var(--color-secondary-100);
}

/* Objective Detail Grid */
.objective-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.objective-detail-card {
    margin-bottom: 0;
}

/* Objective Description Section */
.objective-description-section {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .objective-description-section {
    border-bottom-color: var(--color-secondary-700);
}

.section-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
}

[data-theme="dark"] .section-label {
    color: var(--color-secondary-400);
}

.objective-description-text {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-secondary-700);
    margin: 0;
}

[data-theme="dark"] .objective-description-text {
    color: var(--color-secondary-300);
}

/* Objective Detail Code */
.objective-detail-code {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-inline-end: var(--space-3);
}

[data-theme="dark"] .objective-detail-code {
    color: var(--color-secondary-400);
}

/* KPI Item Card */
.kpi-item-card,
.initiative-item-card {
    padding: var(--space-5);
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

[data-theme="dark"] .kpi-item-card,
[data-theme="dark"] .initiative-item-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.kpi-item-card:hover,
.initiative-item-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--color-primary-200);
}

[data-theme="dark"] .kpi-item-card:hover,
[data-theme="dark"] .initiative-item-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary-700);
}

.kpi-item-title-section,
.initiative-item-title-section {
    flex: 1;
}

.kpi-item-title a,
.initiative-item-title a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-secondary-900);
    text-decoration: none;
    font-size: var(--text-lg);
    font-weight: 600;
    transition: color 0.2s ease;
}

.kpi-item-title a i,
.initiative-item-title a i {
    color: var(--color-primary-500);
}

.kpi-item-title a:hover,
.initiative-item-title a:hover {
    color: var(--color-primary-600);
}

[data-theme="dark"] .kpi-item-title a,
[data-theme="dark"] .initiative-item-title a {
    color: var(--color-secondary-100);
}

.kpi-item-code,
.initiative-item-code {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-1);
}

[data-theme="dark"] .kpi-item-code,
[data-theme="dark"] .initiative-item-code {
    color: var(--color-secondary-400);
}

.kpi-item-description,
.initiative-item-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.6;
    margin: var(--space-3) 0;
}

[data-theme="dark"] .kpi-item-description,
[data-theme="dark"] .initiative-item-description {
    color: var(--color-secondary-400);
}

.kpi-item-values {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .kpi-item-values {
    border-top-color: var(--color-secondary-700);
}

.kpi-value-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.kpi-value-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .kpi-value-label {
    color: var(--color-secondary-400);
}

.kpi-value-number {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .kpi-value-number {
    color: var(--color-secondary-100);
}

.initiative-item-progress {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .initiative-item-progress {
    border-top-color: var(--color-secondary-700);
}

/* KPIs and Initiatives Grids */
.kpis-grid,
.initiatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

@media (max-width: 1024px) {
    .kpis-grid,
    .initiatives-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .objective-detail-hero-main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .objective-detail-metrics {
        grid-template-columns: 1fr;
    }

    .kpis-grid,
    .initiatives-grid {
        grid-template-columns: 1fr;
    }
}

/* KPI Detail Hero Section */
.kpi-detail-hero {
    margin-bottom: var(--space-8);
}

.kpi-detail-hero-main {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .kpi-detail-hero-main {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(15, 23, 42, 0.5) 100%);
    border-color: var(--color-secondary-700);
}

/* Gauge Wrapper */
.kpi-detail-gauge-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.kpi-detail-gauge-label {
    text-align: center;
}

.gauge-label-text {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-secondary-600);
}

[data-theme="dark"] .gauge-label-text {
    color: var(--color-secondary-400);
}

/* Progress Gauge - Enhanced for Detail Page */
.kpi-detail-gauge-wrapper .progress-gauge {
    width: 160px;
    height: 160px;
}

.kpi-detail-gauge-wrapper .progress-gauge-number {
    font-size: 36px;
    font-weight: 700;
}

.kpi-detail-gauge-wrapper .progress-gauge-symbol {
    font-size: var(--text-lg);
}

/* KPI Metrics Cards */
.kpi-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    flex: 1;
}

.kpi-metric-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

[data-theme="dark"] .kpi-metric-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

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

[data-theme="dark"] .kpi-metric-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kpi-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    flex-shrink: 0;
}

.kpi-metric-baseline .kpi-metric-icon {
    background: var(--color-secondary-100);
    color: var(--color-secondary-600);
}

.kpi-metric-current .kpi-metric-icon {
    background: var(--color-success-light);
    color: var(--color-success-main);
}

.kpi-metric-target .kpi-metric-icon {
    background: var(--color-info-light);
    color: var(--color-info-main);
}

[data-theme="dark"] .kpi-metric-icon {
    background: var(--color-secondary-700);
}

.kpi-metric-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.kpi-metric-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .kpi-metric-label {
    color: var(--color-secondary-400);
}

.kpi-metric-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-secondary-900);
    line-height: 1.2;
}

[data-theme="dark"] .kpi-metric-value {
    color: var(--color-secondary-100);
}

.kpi-metric-value-current {
    color: var(--color-success-main);
}

.kpi-metric-value-target {
    color: var(--color-info-main);
}

/* KPI Detail Grid */
.kpi-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

/* Split Grid Layout: 2/3 and 1/3 */
.kpi-detail-grid-split {
    grid-template-columns: 2fr 1fr;
}

.kpi-detail-card-main {
    /* 2/3 width - Information section */
}

.kpi-detail-card-side {
    /* 1/3 width - Description section */
}

.kpi-detail-card {
    margin-bottom: 0;
}

/* Detail Card Header Enhancement */
.detail-card-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.detail-card-header-content i {
    flex-shrink: 0;
}

/* Info Link */
.info-link {
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.info-link:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

[data-theme="dark"] .info-link {
    color: var(--color-primary-400);
}

[data-theme="dark"] .info-link:hover {
    color: var(--color-primary-300);
}

.info-link-code {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    font-weight: 500;
}

/* Direction Indicator */
.direction-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-secondary-50);
    font-size: var(--text-sm);
}

[data-theme="dark"] .direction-indicator {
    background: var(--color-secondary-700);
}

.direction-indicator i {
    width: 16px;
    height: 16px;
}

.direction-higher_is_better {
    color: var(--color-success-main);
}

.direction-lower_is_better {
    color: var(--color-warning-main);
}

/* KPI Description Content */
.kpi-description-content {
    padding: var(--space-4);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
    line-height: 1.7;
    color: var(--color-secondary-700);
}

[data-theme="dark"] .kpi-description-content {
    background: var(--color-secondary-700);
    color: var(--color-secondary-300);
}

.kpi-description-content p {
    margin: 0;
}

/* Historical Values Section - Redesigned */
.kpi-historical-values {
    margin-top: var(--space-6);
}

.detail-card-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kpi-historical-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Historical Stats Summary */
.kpi-historical-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-secondary-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .kpi-historical-stats {
    background: var(--color-secondary-700);
    border-color: var(--color-secondary-600);
}

.historical-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
}

.historical-stat-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .historical-stat-label {
    color: var(--color-secondary-400);
}

.historical-stat-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .historical-stat-value {
    color: var(--color-secondary-100);
}

.historical-stat-value-latest {
    color: var(--color-primary-600);
}

[data-theme="dark"] .historical-stat-value-latest {
    color: var(--color-primary-400);
}

/* Historical Timeline */
.kpi-historical-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.historical-value-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    border-inline-start: 4px solid var(--color-secondary-300);
    transition: all 0.2s ease;
}

[data-theme="dark"] .historical-value-item {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
    border-inline-start-color: var(--color-secondary-600);
}

.historical-value-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-inline-start-color: var(--color-primary-500);
}

[data-theme="dark"] .historical-value-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.historical-value-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.historical-value-period {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-700);
}

[data-theme="dark"] .historical-value-period {
    color: var(--color-secondary-300);
}

.historical-value-period i {
    color: var(--color-secondary-400);
}

.historical-value-badge {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.historical-value-badge-latest {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

[data-theme="dark"] .historical-value-badge-latest {
    background: var(--color-primary-900);
    color: var(--color-primary-300);
}

.historical-value-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
}

.historical-value-metric {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.historical-value-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .historical-value-label {
    color: var(--color-secondary-400);
}

.historical-value-number {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .historical-value-number {
    color: var(--color-secondary-100);
}

.historical-value-target {
    color: var(--color-secondary-600);
    font-weight: 600;
}

[data-theme="dark"] .historical-value-target {
    color: var(--color-secondary-400);
}

.historical-value-change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-secondary-50);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
}

[data-theme="dark"] .historical-value-change {
    background: var(--color-secondary-700);
}

.historical-change-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.historical-change-icon.historical-change-positive {
    color: var(--color-success-main);
}

.historical-change-icon.historical-change-negative {
    color: var(--color-danger-main);
}

.historical-change-value {
    font-size: var(--text-xs);
    font-weight: 600;
}

.historical-change-positive {
    color: var(--color-success-main);
}

.historical-change-negative {
    color: var(--color-danger-main);
}

.historical-value-notes {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--color-secondary-50);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
    line-height: 1.4;
}

[data-theme="dark"] .historical-value-notes {
    background: var(--color-secondary-700);
    color: var(--color-secondary-300);
}

.historical-value-notes i {
    color: var(--color-secondary-400);
    flex-shrink: 0;
    margin-top: 2px;
}

/* KPI Update Modal Styles */
.kpi-update-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

[data-theme="dark"] .kpi-update-info {
    background: var(--color-secondary-700);
}

.kpi-update-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.kpi-update-info-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-secondary-600);
}

[data-theme="dark"] .kpi-update-info-label {
    color: var(--color-secondary-400);
}

.kpi-update-info-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-900);
    text-align: end;
}

[data-theme="dark"] .kpi-update-info-value {
    color: var(--color-secondary-100);
}

/* Responsive KPI Detail Page */
@media (max-width: 1023px) {
    .kpi-detail-hero-main {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .kpi-detail-metrics {
        grid-template-columns: 1fr;
    }
    
    .kpi-detail-grid,
    .kpi-detail-grid-split {
        grid-template-columns: 1fr;
    }
    
    .kpi-historical-stats {
        grid-template-columns: 1fr;
    }
    
    .historical-value-content {
        grid-template-columns: 1fr;
    }
    
    .info-tag {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .info-tags-container {
        gap: var(--space-2);
    }
    
    .info-tag {
        padding: var(--space-3) var(--space-4);
        min-width: calc(50% - var(--space-1));
        max-width: calc(50% - var(--space-1));
    }
    
    .info-tag-icon {
        width: 32px;
        height: 32px;
    }
    
    .info-tag-icon i {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 767px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .perspectives-grid {
        grid-template-columns: 1fr;
    }
    
    .actions-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .kpi-item-header,
    .initiative-item-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .kpi-detail-hero-main {
        padding: var(--space-4);
    }
    
    .kpi-detail-gauge-wrapper .progress-gauge {
        width: 120px;
        height: 120px;
    }
    
    .kpi-detail-gauge-wrapper .progress-gauge-number {
        font-size: 28px;
    }
    
    .kpi-metric-card {
        padding: var(--space-4);
    }
    
    .kpi-metric-value {
        font-size: var(--text-xl);
    }
}

/* ============================================
   PORTFOLIO PAGE STYLES
   ============================================ */

/* Portfolio Tabs */
.portfolio-tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 2px solid var(--color-secondary-200);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-2);
}

[data-theme="dark"] .portfolio-tabs {
    border-bottom-color: var(--color-secondary-700);
}

.portfolio-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-secondary-600);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    position: relative;
}

.portfolio-tab:hover {
    color: var(--color-primary-600);
    background: var(--color-primary-50);
}

[data-theme="dark"] .portfolio-tab {
    color: var(--color-secondary-400);
}

[data-theme="dark"] .portfolio-tab:hover {
    color: var(--color-primary-400);
    background: var(--color-secondary-800);
}

.portfolio-tab.active {
    color: var(--color-primary-600);
    border-bottom-color: var(--color-primary-600);
    font-weight: 600;
}

[data-theme="dark"] .portfolio-tab.active {
    color: var(--color-primary-400);
    border-bottom-color: var(--color-primary-400);
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    border-radius: 10px;
    font-size: var(--text-xs);
    font-weight: 600;
}

[data-theme="dark"] .tab-badge {
    background: var(--color-primary-900);
    color: var(--color-primary-300);
}

.portfolio-tab.active .tab-badge {
    background: var(--color-primary-600);
    color: white;
}

[data-theme="dark"] .portfolio-tab.active .tab-badge {
    background: var(--color-primary-500);
    color: var(--color-secondary-900);
}

.portfolio-tab-content {
    display: none;
}

.portfolio-tab-content.active {
    display: block;
}

/* Portfolio Metrics Grid */
.portfolio-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.portfolio-metric-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

[data-theme="dark"] .portfolio-metric-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

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

[data-theme="dark"] .portfolio-metric-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.metric-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
}

.health-icon {
    background: var(--color-success-light);
    color: var(--color-success-main);
}

.allocation-icon {
    background: var(--color-primary-100);
    color: var(--color-primary-600);
}

.stats-icon {
    background: var(--color-info-light);
    color: var(--color-info-main);
}

[data-theme="dark"] .health-icon {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-main);
}

[data-theme="dark"] .allocation-icon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-primary-400);
}

[data-theme="dark"] .stats-icon {
    background: rgba(6, 182, 212, 0.2);
    color: var(--color-info-main);
}

.metric-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
}

[data-theme="dark"] .metric-title {
    color: var(--color-secondary-100);
}

.metric-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Health Score Large */
.health-score-large {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-2);
}

.health-score-large.health-score-excellent {
    color: var(--color-success-main);
}

.health-score-large.health-score-good {
    color: var(--color-primary-600);
}

.health-score-large.health-score-fair {
    color: var(--color-warning-main);
}

.health-score-large.health-score-poor {
    color: var(--color-danger-main);
}

.health-trend {
    margin-bottom: var(--space-4);
}

.health-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .health-breakdown {
    border-top-color: var(--color-secondary-700);
}

.health-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breakdown-label {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .breakdown-label {
    color: var(--color-secondary-400);
}

.breakdown-value {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .breakdown-value {
    color: var(--color-secondary-100);
}

/* Allocation Card */
.allocation-main {
    text-align: center;
    margin-bottom: var(--space-4);
}

.allocation-percentage {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary-600);
    line-height: 1;
    margin-bottom: var(--space-2);
}

[data-theme="dark"] .allocation-percentage {
    color: var(--color-primary-400);
}

.allocation-label {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .allocation-label {
    color: var(--color-secondary-400);
}

.allocation-progress {
    margin-bottom: var(--space-4);
}

.allocation-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .allocation-details {
    border-top-color: var(--color-secondary-700);
}

.allocation-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-label {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .detail-label {
    color: var(--color-secondary-400);
}

.detail-value {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .detail-value {
    color: var(--color-secondary-100);
}

/* Summary Stats Grid */
.summary-stats-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.summary-stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-md);
}

[data-theme="dark"] .summary-stat-item {
    background: var(--color-secondary-700);
}

.stat-icon-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border-radius: var(--radius-md);
    color: var(--color-primary-600);
}

[data-theme="dark"] .stat-icon-small {
    background: var(--color-secondary-600);
    color: var(--color-primary-400);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-secondary-900);
    line-height: 1.2;
}

[data-theme="dark"] .stat-value {
    color: var(--color-secondary-100);
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
    margin-top: var(--space-1);
}

[data-theme="dark"] .stat-label {
    color: var(--color-secondary-400);
}

/* Recommendations Section */
.recommendations-section {
    margin-top: var(--space-8);
}

.section-header {
    margin-bottom: var(--space-5);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
}

[data-theme="dark"] .section-title {
    color: var(--color-secondary-100);
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.recommendation-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all 0.2s ease;
}

[data-theme="dark"] .recommendation-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

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

[data-theme="dark"] .recommendation-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.recommendation-header {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.recommendation-priority,
.recommendation-type {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recommendation-priority.priority-high {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.recommendation-priority.priority-medium {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.recommendation-priority.priority-low {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.recommendation-type {
    background: var(--color-secondary-100);
    color: var(--color-secondary-700);
}

[data-theme="dark"] .recommendation-type {
    background: var(--color-secondary-700);
    color: var(--color-secondary-300);
}

.recommendation-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0 0 var(--space-2) 0;
}

[data-theme="dark"] .recommendation-title {
    color: var(--color-secondary-100);
}

.recommendation-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.5;
    margin: 0;
}

[data-theme="dark"] .recommendation-description {
    color: var(--color-secondary-400);
}

/* Portfolio Explore Section */
.portfolio-explore-section {
    margin-top: var(--space-6);
}

.explore-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.explore-title-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.explore-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
}

[data-theme="dark"] .explore-title {
    color: var(--color-secondary-100);
}

.explore-subtitle {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin: 0;
}

[data-theme="dark"] .explore-subtitle {
    color: var(--color-secondary-400);
}

.explore-filters {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.filter-group {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.filter-search {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: white;
    color: var(--color-secondary-900);
    transition: all 0.2s ease;
}

[data-theme="dark"] .filter-search {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
    color: var(--color-secondary-100);
}

.filter-search:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-group i {
    position: absolute;
    inset-inline-start: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-secondary-400);
    pointer-events: none;
}

.filter-select {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-secondary-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: white;
    color: var(--color-secondary-900);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
}

[data-theme="dark"] .filter-select {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
    color: var(--color-secondary-100);
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Portfolio Initiative/Objective Cards */
.portfolio-initiative-card,
.portfolio-objective-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

[data-theme="dark"] .portfolio-initiative-card,
[data-theme="dark"] .portfolio-objective-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.portfolio-initiative-card:hover,
.portfolio-objective-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: var(--color-primary-300);
}

[data-theme="dark"] .portfolio-initiative-card:hover,
[data-theme="dark"] .portfolio-objective-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: var(--color-primary-600);
}

.initiative-card-header,

.initiative-card-code-section,
.objective-card-code-section {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.initiative-card-code,
.objective-card-code {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .initiative-card-code,
[data-theme="dark"] .objective-card-code {
    color: var(--color-secondary-400);
}

.initiative-priority {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.initiative-priority.priority-high {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.initiative-priority.priority-medium {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.initiative-priority.priority-low {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.initiative-status,
.objective-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: capitalize;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.status-not_started {
    background: var(--color-secondary-400);
}

.status-dot.status-in_progress {
    background: var(--color-primary-500);
}

.status-dot.status-on_hold {
    background: var(--color-warning-main);
}

.status-dot.status-completed {
    background: var(--color-success-main);
}

.status-dot.status-cancelled {
    background: var(--color-danger-main);
}

.initiative-card-title,
.objective-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
    line-height: 1.4;
}

[data-theme="dark"] .initiative-card-title,
[data-theme="dark"] .objective-card-title {
    color: var(--color-secondary-100);
}

.initiative-card-title a,
.objective-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.initiative-card-title a:hover,
.objective-card-title a:hover {
    color: var(--color-primary-600);
}

[data-theme="dark"] .initiative-card-title a:hover,
[data-theme="dark"] .objective-card-title a:hover {
    color: var(--color-primary-400);
}

.initiative-card-description,
.objective-card-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.6;
    margin: 0;
}

[data-theme="dark"] .initiative-card-description,
[data-theme="dark"] .objective-card-description {
    color: var(--color-secondary-400);
}

.initiative-card-progress,
.objective-card-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

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

.progress-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .progress-label {
    color: var(--color-secondary-400);
}

.progress-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .progress-value {
    color: var(--color-secondary-100);
}

.initiative-card-budget {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-md);
}

[data-theme="dark"] .initiative-card-budget {
    background: var(--color-secondary-700);
}

.budget-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.budget-label {
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .budget-label {
    color: var(--color-secondary-400);
}

.budget-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .budget-value {
    color: var(--color-secondary-100);
}

.budget-value.budget-over {
    color: var(--color-danger-main);
}

.budget-value.budget-under {
    color: var(--color-success-main);
}

.initiative-card-footer,
.objective-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .initiative-card-footer,
[data-theme="dark"] .objective-card-footer {
    border-top-color: var(--color-secondary-700);
}

.objective-meta {
    display: flex;
    gap: var(--space-4);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .meta-item {
    color: var(--color-secondary-400);
}

/* Initiatives and Objectives Grids */
.initiatives-grid,
.objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-5);
}

/* Responsive Portfolio Styles */
@media (max-width: 1023px) {
    .portfolio-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .recommendations-grid {
        grid-template-columns: 1fr;
    }
    
    .initiatives-grid,
    .objectives-grid {
        grid-template-columns: 1fr;
    }
    
    .explore-filters {
        flex-direction: column;
    }
    
    .filter-group,
    .filter-select {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .portfolio-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .portfolio-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .portfolio-metric-card {
        padding: var(--space-4);
    }
    
    .health-score-large {
        font-size: 36px;
    }
    
    .allocation-percentage {
        font-size: 28px;
    }
}

/* ============================================
   RESOURCE POOL CARDS
   ============================================ */

.resource-pools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
    padding: var(--space-4) 0;
}

@media (max-width: 768px) {
    .resource-pools-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.resource-pool-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

[data-theme="dark"] .resource-pool-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.resource-pool-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-300);
    transform: translateY(-2px);
}

[data-theme="dark"] .resource-pool-card:hover {
    border-color: var(--color-primary-600);
}

.resource-pool-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .resource-pool-card-header {
    border-bottom-color: var(--color-secondary-700);
}

.resource-pool-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-600);
    flex-shrink: 0;
}

[data-theme="dark"] .resource-pool-card-icon {
    background: var(--color-primary-900);
    color: var(--color-primary-400);
}

.resource-pool-card-title-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.resource-pool-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
    line-height: 1.3;
}

[data-theme="dark"] .resource-pool-card-title {
    color: var(--color-secondary-100);
}

.resource-pool-card-body {
    flex: 1;
    margin-bottom: var(--space-5);
}

.resource-pool-card-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.6;
    margin: 0 0 var(--space-4) 0;
}

[data-theme="dark"] .resource-pool-card-description {
    color: var(--color-secondary-400);
}

.resource-pool-card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.resource-pool-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.resource-pool-meta-item i {
    color: var(--color-secondary-400);
    flex-shrink: 0;
}

[data-theme="dark"] .resource-pool-meta-item i {
    color: var(--color-secondary-500);
}

.resource-pool-meta-label {
    color: var(--color-secondary-600);
    font-weight: 500;
}

[data-theme="dark"] .resource-pool-meta-label {
    color: var(--color-secondary-400);
}

.resource-pool-meta-value {
    color: var(--color-secondary-900);
    font-weight: 600;
    margin-inline-start: auto;
}

[data-theme="dark"] .resource-pool-meta-value {
    color: var(--color-secondary-100);
}

.resource-pool-card-footer {
    padding-top: var(--space-4);
    margin-top: auto;
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .resource-pool-card-footer {
    border-top-color: var(--color-secondary-700);
}

.resource-pool-card-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.resource-pool-card-actions .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.resource-pool-card-actions .btn .btn-text {
    display: none;
}

@media (min-width: 768px) {
    .resource-pool-card-actions .btn .btn-text {
        display: inline;
        margin-inline-start: var(--space-2);
    }
    
    .resource-pool-card-actions .btn {
        flex: 0 1 auto;
    }
}

/* ============================================
   RESOURCE CAPACITY STYLES
   ============================================ */

/* Pool Section */
.capacity-pool-section {
    margin-bottom: 3rem;
}

/* Pool Header Card */
.pool-header-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

[data-theme="dark"] .pool-header-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

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

.pool-header-info {
    flex: 1;
}

.pool-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-secondary-900);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

[data-theme="dark"] .pool-title {
    color: var(--color-secondary-100);
}

.pool-description {
    color: var(--color-secondary-600);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

[data-theme="dark"] .pool-description {
    color: var(--color-secondary-400);
}

.pool-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .pool-metrics {
    border-top-color: var(--color-secondary-700);
}

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

.metric-label {
    font-size: 0.75rem;
    color: var(--color-secondary-600);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

[data-theme="dark"] .metric-label {
    color: var(--color-secondary-400);
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary-900);
    line-height: 1.2;
}

[data-theme="dark"] .metric-value {
    color: var(--color-secondary-100);
}

/* Capacity Records Section */
.capacity-records-section {
    margin-top: 2rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-secondary-200);
}

[data-theme="dark"] .section-header {
    border-bottom-color: var(--color-secondary-700);
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-secondary-900);
    margin: 0;
}

[data-theme="dark"] .section-title {
    color: var(--color-secondary-100);
}

/* Capacity Cards Grid */
.capacity-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Capacity Card */
.capacity-card {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .capacity-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.capacity-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.capacity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary-500);
}

[data-theme="dark"] .capacity-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    border-color: var(--color-primary-500);
}

.capacity-card:hover::before {
    opacity: 1;
}

/* Card Header */
.capacity-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .capacity-card-header {
    border-bottom-color: var(--color-secondary-700);
}

.capacity-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.user-avatar,
.user-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--color-secondary-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .user-avatar,
[data-theme="dark"] .user-avatar-placeholder {
    border-color: var(--color-secondary-700);
}

.user-avatar {
    object-fit: cover;
}

.user-avatar-placeholder {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-400));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    border-color: var(--color-primary-500);
}

.user-avatar-placeholder.pool-level {
    background: linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-400));
    border-color: var(--color-secondary-500);
}

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

.user-name {
    font-weight: 700;
    color: var(--color-secondary-900);
    margin-bottom: 0.25rem;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .user-name {
    color: var(--color-secondary-100);
}

.user-email {
    font-size: 0.8125rem;
    color: var(--color-secondary-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .user-email {
    color: var(--color-secondary-400);
}

/* Card Actions */
.capacity-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--color-secondary-200);
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-secondary-600);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

[data-theme="dark"] .btn-icon {
    border-color: var(--color-secondary-700);
    color: var(--color-secondary-400);
}

.btn-icon:hover {
    background: var(--color-secondary-50);
    color: var(--color-primary-600);
    border-color: var(--color-primary-500);
    transform: scale(1.05);
}

[data-theme="dark"] .btn-icon:hover {
    background: var(--color-secondary-700);
    color: var(--color-primary-400);
}

.btn-icon:active {
    transform: scale(0.95);
}

/* Form Actions - Horizontal Layout */
.form-actions {
    display: flex;
    flex-direction: row;
    gap: var(--space-3);
    align-items: center;
    justify-content: flex-start;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .form-actions {
    border-top-color: var(--color-secondary-700);
}

.form-actions .btn {
    flex-shrink: 0;
}

/* ============================================
   OKR DASHBOARD - REDESIGNED
   ============================================ */

/* OKR Dashboard Stats Section */
.okr-dashboard-stats {
    margin-bottom: var(--space-8);
}

.okr-main-progress-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .okr-main-progress-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.okr-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .okr-progress-header {
    border-bottom-color: var(--color-secondary-700);
}

.okr-progress-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-secondary-900);
    margin: 0 0 var(--space-2) 0;
}

[data-theme="dark"] .okr-progress-title {
    color: var(--color-secondary-100);
}

.okr-cycle-name {
    font-size: var(--text-base);
    color: var(--color-secondary-600);
    margin: 0;
}

[data-theme="dark"] .okr-cycle-name {
    color: var(--color-secondary-400);
}

.okr-cycle-dates {
    text-align: right;
}

.date-range {
    font-size: var(--text-sm);
    color: var(--color-secondary-500);
}

.okr-progress-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-8);
    align-items: center;
}

/* Circular Progress */
.okr-progress-circle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.okr-progress-circle {
    position: relative;
    width: 200px;
    height: 200px;
}

.okr-progress-ring {
    transform: rotate(-90deg);
}

.okr-progress-ring-bg {
    transition: stroke 0.3s ease;
}

[data-theme="dark"] .okr-progress-ring-bg {
    stroke: var(--color-secondary-700);
}

.okr-progress-ring-fill {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.okr-progress-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.okr-progress-percentage {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary-600);
    line-height: 1;
    margin-bottom: var(--space-1);
}

[data-theme="dark"] .okr-progress-percentage {
    color: var(--color-primary-400);
}

.okr-progress-label {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    font-weight: 500;
}

[data-theme="dark"] .okr-progress-label {
    color: var(--color-secondary-400);
}

/* Metrics Grid */
.okr-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.okr-metric-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-secondary-200);
    transition: all 0.2s ease;
}

[data-theme="dark"] .okr-metric-card {
    background: var(--color-secondary-750);
    border-color: var(--color-secondary-700);
}

.okr-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary-300);
}

[data-theme="dark"] .okr-metric-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary-600);
}

.okr-metric-card.success {
    background: var(--color-success-light);
    border-color: var(--color-success-main);
}

[data-theme="dark"] .okr-metric-card.success {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--color-success-main);
}

.okr-metric-card.info {
    background: var(--color-info-light);
    border-color: var(--color-info-main);
}

[data-theme="dark"] .okr-metric-card.info {
    background: rgba(6, 182, 212, 0.1);
    border-color: var(--color-info-main);
}

.okr-metric-card.warning {
    background: var(--color-warning-light);
    border-color: var(--color-warning-main);
}

[data-theme="dark"] .okr-metric-card.warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--color-warning-main);
}

.okr-metric-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: white;
    color: var(--color-primary-600);
    flex-shrink: 0;
}

.okr-metric-icon svg {
    width: 24px;
    height: 24px;
}

.okr-metric-icon.total {
    background: var(--color-primary-100);
    color: var(--color-primary-600);
}

.okr-metric-card.success .okr-metric-icon {
    background: var(--color-success-main);
    color: white;
}

.okr-metric-card.info .okr-metric-icon {
    background: var(--color-info-main);
    color: white;
}

.okr-metric-card.warning .okr-metric-icon {
    background: var(--color-warning-main);
    color: white;
}

.okr-metric-content {
    flex: 1;
}

.okr-metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-secondary-900);
    line-height: 1;
    margin-bottom: var(--space-1);
}

[data-theme="dark"] .okr-metric-value {
    color: var(--color-secondary-100);
}

.okr-metric-label {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    font-weight: 500;
}

[data-theme="dark"] .okr-metric-label {
    color: var(--color-secondary-400);
}

/* Objectives Section */
.okr-objectives-section {
    margin-top: var(--space-8);
}

.okr-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.okr-section-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-secondary-900);
    margin: 0;
}

[data-theme="dark"] .okr-section-title {
    color: var(--color-secondary-100);
}

.okr-objectives-count {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    background: var(--color-secondary-100);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-weight: 500;
}

[data-theme="dark"] .okr-objectives-count {
    color: var(--color-secondary-300);
    background: var(--color-secondary-700);
}

/* Objectives Grid */
.okr-objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--space-6);
}

/* Objective Card */
.okr-objective-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-secondary-200);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .okr-objective-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.okr-objective-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06);
    border-color: var(--color-primary-300);
}

[data-theme="dark"] .okr-objective-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
    border-color: var(--color-primary-600);
}

.okr-objective-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .okr-objective-card-header {
    border-bottom-color: var(--color-secondary-700);
}

.okr-objective-title-section {
    flex: 1;
    min-width: 0;
}

.okr-objective-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .okr-objective-title {
    color: var(--color-secondary-100);
}

.okr-objective-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.okr-objective-title a:hover {
    color: var(--color-primary-600);
}

.okr-objective-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .okr-objective-description {
    color: var(--color-secondary-400);
}

.okr-objective-score-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    font-weight: 700;
}

.okr-objective-score-badge.score-excellent {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border: 2px solid var(--color-success-main);
}

.okr-objective-score-badge.score-good {
    background: var(--color-info-light);
    color: var(--color-info-dark);
    border: 2px solid var(--color-info-main);
}

.okr-objective-score-badge.score-needs-work {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
    border: 2px solid var(--color-warning-main);
}

.okr-score-value {
    font-size: 1.5rem;
    line-height: 1;
}

.okr-score-label {
    font-size: var(--text-xs);
    opacity: 0.8;
}

.okr-objective-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Progress Bar */
.okr-progress-bar-wrapper {
    margin-bottom: var(--space-2);
}

.okr-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-secondary-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

[data-theme="dark"] .okr-progress-bar {
    background: var(--color-secondary-700);
}

.okr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.okr-progress-fill[data-score="100"] {
    background: linear-gradient(90deg, var(--color-success-main), var(--color-success-light));
}

.okr-progress-text {
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
    font-weight: 500;
}

[data-theme="dark"] .okr-progress-text {
    color: var(--color-secondary-400);
}

/* Key Results */
.okr-key-results-list {
    margin-top: var(--space-2);
}

.okr-key-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.okr-key-results-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-700);
}

[data-theme="dark"] .okr-key-results-title {
    color: var(--color-secondary-300);
}

.okr-key-results-count {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    background: var(--color-secondary-100);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

[data-theme="dark"] .okr-key-results-count {
    background: var(--color-secondary-700);
    color: var(--color-secondary-400);
}

.okr-key-results-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.okr-key-result-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.okr-kr-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.okr-kr-name {
    font-size: var(--text-sm);
    color: var(--color-secondary-700);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-inline-end: var(--space-2);
}

[data-theme="dark"] .okr-kr-name {
    color: var(--color-secondary-300);
}

.okr-kr-values {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    white-space: nowrap;
}

.okr-kr-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.okr-kr-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--color-secondary-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

[data-theme="dark"] .okr-kr-progress-bar {
    background: var(--color-secondary-700);
}

.okr-kr-progress-fill {
    height: 100%;
    background: var(--color-primary-500);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.okr-kr-score {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-600);
    min-width: 40px;
    text-align: right;
}

[data-theme="dark"] .okr-kr-score {
    color: var(--color-secondary-400);
}

.okr-kr-more {
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
    text-align: center;
    padding: var(--space-2);
    font-style: italic;
}

.okr-no-key-results {
    font-size: var(--text-sm);
    color: var(--color-secondary-500);
    text-align: center;
    padding: var(--space-3);
    font-style: italic;
}

/* Confidence Indicator */
.okr-confidence-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-secondary-50);
    border-radius: var(--radius-md);
}

[data-theme="dark"] .okr-confidence-indicator {
    background: var(--color-secondary-750);
}

.okr-confidence-label {
    font-size: var(--text-xs);
    color: var(--color-secondary-600);
    font-weight: 500;
    white-space: nowrap;
}

.okr-confidence-bar {
    flex: 1;
    height: 6px;
    background: var(--color-secondary-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

[data-theme="dark"] .okr-confidence-bar {
    background: var(--color-secondary-700);
}

.okr-confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.okr-confidence-value {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary-600);
    min-width: 35px;
    text-align: right;
}

[data-theme="dark"] .okr-confidence-value {
    color: var(--color-primary-400);
}

.okr-objective-card-footer {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .okr-objective-card-footer {
    border-top-color: var(--color-secondary-700);
}

.okr-objective-card-footer .btn {
    flex: 1;
}

/* Empty State */
.okr-empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    background: var(--color-secondary-50);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--color-secondary-300);
}

[data-theme="dark"] .okr-empty-state {
    background: var(--color-secondary-750);
    border-color: var(--color-secondary-700);
}

.okr-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    color: var(--color-secondary-400);
}

.okr-empty-icon svg {
    width: 100%;
    height: 100%;
}

.okr-empty-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0 0 var(--space-2) 0;
}

[data-theme="dark"] .okr-empty-title {
    color: var(--color-secondary-100);
}

.okr-empty-description {
    font-size: var(--text-base);
    color: var(--color-secondary-600);
    margin: 0 0 var(--space-6) 0;
}

[data-theme="dark"] .okr-empty-description {
    color: var(--color-secondary-400);
}

/* Responsive Design */
@media (max-width: 1023px) {
    .okr-progress-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .okr-progress-circle-wrapper {
        justify-self: center;
    }
    
    .okr-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .okr-objectives-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .okr-progress-header {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .okr-cycle-dates {
        text-align: left;
    }
    
    .okr-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .okr-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .okr-objective-card-header {
        flex-direction: column;
    }
    
    .okr-objective-score-badge {
        align-self: flex-end;
    }
}

/* ============================================
   OKR DASHBOARD PAGE - Modern layout
   ============================================ */
.okr-dashboard-page {
    --okr-dashboard-radius: 16px;
    --okr-dashboard-gap: 1.5rem;
}

.okr-dashboard-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--okr-dashboard-gap);
    margin-bottom: 2rem;
}

.okr-dashboard-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-secondary-900);
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.02em;
}

[data-theme="dark"] .okr-dashboard-title {
    color: var(--color-secondary-50);
}

.okr-dashboard-desc {
    font-size: 0.9375rem;
    color: var(--color-secondary-600);
    margin: 0;
}

[data-theme="dark"] .okr-dashboard-desc {
    color: var(--color-secondary-400);
}

.okr-dashboard-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.okr-dashboard-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.okr-dashboard-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.okr-dashboard-control-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

[data-theme="dark"] .okr-dashboard-control-label {
    color: var(--color-secondary-400);
}

.okr-dashboard-select {
    min-width: 180px;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 0.875rem;
}

.okr-dashboard-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.okr-dashboard-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Progress card */
.okr-dashboard-progress-card {
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--okr-dashboard-radius);
    padding: 2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .okr-dashboard-progress-card {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.okr-dashboard-progress-head {
    margin-bottom: 1.5rem;
}

.okr-dashboard-cycle-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.okr-dashboard-cycle-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary-600);
    background: rgba(59, 130, 246, 0.12);
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
}

[data-theme="dark"] .okr-dashboard-cycle-name {
    color: var(--color-primary-400);
    background: rgba(59, 130, 246, 0.18);
}

.okr-dashboard-cycle-dates {
    font-size: 0.8125rem;
    color: var(--color-secondary-500);
}

[data-theme="dark"] .okr-dashboard-cycle-dates {
    color: var(--color-secondary-400);
}

.okr-dashboard-progress-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-secondary-800);
    margin: 0;
}

[data-theme="dark"] .okr-dashboard-progress-title {
    color: var(--color-secondary-200);
}

.okr-dashboard-progress-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
    align-items: center;
}

.okr-dashboard-score-ring {
    flex-shrink: 0;
}

.okr-dashboard-score-ring-inner {
    position: relative;
    width: 160px;
    height: 160px;
}

.okr-dashboard-ring {
    transform: rotate(-90deg);
}

.okr-dashboard-ring-bg {
    stroke: var(--color-secondary-200);
    transition: stroke 0.3s ease;
}

[data-theme="dark"] .okr-dashboard-ring-bg {
    stroke: var(--color-secondary-600);
}

.okr-dashboard-ring-fill {
    stroke: var(--color-primary-500);
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.okr-dashboard-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary-600);
    line-height: 1;
}

[data-theme="dark"] .okr-dashboard-score-value {
    color: var(--color-primary-400);
}

.okr-dashboard-score-caption {
    position: absolute;
    top: calc(50% + 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

[data-theme="dark"] .okr-dashboard-score-caption {
    color: var(--color-secondary-400);
}

.okr-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.okr-dashboard-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.okr-dashboard-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .okr-dashboard-metric {
    background: var(--color-secondary-750);
    border-color: var(--color-secondary-700);
}

[data-theme="dark"] .okr-dashboard-metric:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.okr-dashboard-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.okr-dashboard-metric-icon svg {
    width: 20px;
    height: 20px;
}

.okr-dashboard-metric--total .okr-dashboard-metric-icon {
    background: var(--color-primary-100);
    color: var(--color-primary-600);
}

[data-theme="dark"] .okr-dashboard-metric--total .okr-dashboard-metric-icon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-primary-400);
}

.okr-dashboard-metric--completed .okr-dashboard-metric-icon {
    background: var(--color-success-light);
    color: var(--color-success-main);
}

[data-theme="dark"] .okr-dashboard-metric--completed .okr-dashboard-metric-icon {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success-main);
}

.okr-dashboard-metric--on-track .okr-dashboard-metric-icon {
    background: var(--color-info-light);
    color: var(--color-info-main);
}

[data-theme="dark"] .okr-dashboard-metric--on-track .okr-dashboard-metric-icon {
    background: rgba(6, 182, 212, 0.2);
    color: var(--color-info-main);
}

.okr-dashboard-metric--at-risk .okr-dashboard-metric-icon {
    background: var(--color-warning-light);
    color: var(--color-warning-main);
}

[data-theme="dark"] .okr-dashboard-metric--at-risk .okr-dashboard-metric-icon {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning-main);
}

.okr-dashboard-metric-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.okr-dashboard-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary-900);
    line-height: 1.2;
}

[data-theme="dark"] .okr-dashboard-metric-value {
    color: var(--color-secondary-100);
}

.okr-dashboard-metric-label {
    font-size: 0.75rem;
    color: var(--color-secondary-500);
    line-height: 1.3;
}

[data-theme="dark"] .okr-dashboard-metric-label {
    color: var(--color-secondary-400);
}

/* Objectives section */
.okr-dashboard-objectives {
    margin-top: 0;
}

.okr-dashboard-objectives-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.okr-dashboard-objectives-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
}

[data-theme="dark"] .okr-dashboard-objectives-title {
    color: var(--color-secondary-100);
}

.okr-dashboard-objectives-count {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-secondary-500);
    background: var(--color-secondary-100);
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
}

[data-theme="dark"] .okr-dashboard-objectives-count {
    color: var(--color-secondary-300);
    background: var(--color-secondary-700);
}

/* Empty state */
.okr-dashboard-empty {
    text-align: center;
    padding: 3.5rem 2rem;
    background: var(--color-secondary-50);
    border: 2px dashed var(--color-secondary-200);
    border-radius: var(--okr-dashboard-radius);
}

[data-theme="dark"] .okr-dashboard-empty {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.okr-dashboard-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    color: var(--color-secondary-400);
}

.okr-dashboard-empty-icon svg {
    width: 48px;
    height: 48px;
}

[data-theme="dark"] .okr-dashboard-empty-icon {
    color: var(--color-secondary-500);
}

.okr-dashboard-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary-800);
    margin: 0 0 0.5rem;
}

[data-theme="dark"] .okr-dashboard-empty-title {
    color: var(--color-secondary-200);
}

.okr-dashboard-empty-desc {
    font-size: 0.9375rem;
    color: var(--color-secondary-600);
    margin: 0 auto 1.5rem;
    max-width: 28rem;
}

[data-theme="dark"] .okr-dashboard-empty-desc {
    color: var(--color-secondary-400);
}

.okr-dashboard-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Responsive */
@media (max-width: 1023px) {
    .okr-dashboard-progress-body {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .okr-dashboard-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .okr-dashboard-hero {
        flex-direction: column;
        align-items: stretch;
    }
    .okr-dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .okr-dashboard-controls {
        flex-direction: column;
    }
    .okr-dashboard-select {
        min-width: 0;
    }
    .okr-dashboard-metrics {
        grid-template-columns: 1fr;
    }
}

/* Card Body */
.capacity-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.capacity-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

.capacity-info-item:not(:last-child) {
    border-bottom: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .capacity-info-item:not(:last-child) {
    border-bottom-color: var(--color-secondary-700);
}

.info-label {
    color: var(--color-secondary-600);
    font-weight: 500;
}

[data-theme="dark"] .info-label {
    color: var(--color-secondary-400);
}

.info-value {
    font-weight: 600;
    color: var(--color-secondary-900);
    text-align: right;
}

[data-theme="dark"] .info-value {
    color: var(--color-secondary-100);
}

/* Empty State */
.empty-capacity-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border: 2px dashed var(--color-secondary-200);
    border-radius: 12px;
    transition: all 0.3s ease;
}

[data-theme="dark"] .empty-capacity-state {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.empty-capacity-state:hover {
    border-color: var(--color-primary-500);
    background: var(--color-secondary-50);
}

[data-theme="dark"] .empty-capacity-state:hover {
    background: var(--color-secondary-700);
}

.empty-capacity-state i {
    margin-bottom: 1rem;
    color: var(--color-secondary-600);
    opacity: 0.6;
}

[data-theme="dark"] .empty-capacity-state i {
    color: var(--color-secondary-400);
}

.empty-capacity-state p {
    color: var(--color-secondary-600);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

[data-theme="dark"] .empty-capacity-state p {
    color: var(--color-secondary-400);
}

/* ============================================
   MODAL BASE STYLES
   ============================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    overflow-y: auto;
}

.modal.open {
    display: flex;
}
.modal.open .modal-backdrop {
    opacity: 1;
    visibility: visible;
    z-index: 9998;
}

/* Show modal when hidden attribute is removed (e.g. plan-detail priority modal).
   Scoped to [data-uses-hidden] to avoid auto-showing modals that never had hidden. */
.modal[data-uses-hidden]:not([hidden]) {
    display: flex;
}
.modal[data-uses-hidden]:not([hidden]) .modal-backdrop {
    opacity: 1;
    visibility: visible;
}

/* Ensure modal-content also works (for backward compatibility) */
.modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
    margin: auto;
}

[data-theme="dark"] .modal-content {
    background: var(--color-secondary-800);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: -1;
}

.modal-backdrop.open {
    opacity: 1;
    visibility: visible;
}

[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.modal-container {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
    margin: auto;
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.open .modal-container {
    opacity: 1;
    transform: scale(1) translateY(0);
}

[data-theme="dark"] .modal-container {
    background: var(--color-secondary-800);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-secondary-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--color-secondary-700);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary-900);
    margin: 0;
}

[data-theme="dark"] .modal-title {
    color: var(--color-secondary-100);
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-secondary-600);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.modal-close:hover {
    background: var(--color-secondary-100);
    color: var(--color-secondary-900);
}

[data-theme="dark"] .modal-close {
    color: var(--color-secondary-400);
}

[data-theme="dark"] .modal-close:hover {
    background: var(--color-secondary-700);
    color: var(--color-secondary-100);
}

.modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* Important for flexbox scrolling */
}

/* Ensure forms in modals are flex containers */
.modal-content form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--color-secondary-200);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
    background: white;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--color-secondary-700);
    background: var(--color-secondary-800);
}

[data-theme="dark"] .modal-content form {
    background: transparent;
}

/* Modal size variants */
.modal-sm .modal-container {
    max-width: 400px;
}

.modal-md .modal-container {
    max-width: 600px;
}

.modal-lg .modal-container {
    max-width: 800px;
}

.modal-lg.modal-content {
    max-width: 800px;
}

.modal-xl .modal-container {
    max-width: 1000px;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Modal Enhancements */
#setCapacityModal .modal-container {
    max-width: 600px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

#setCapacityModal .modal-header {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-400) 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-bottom: none;
}

#setCapacityModal .modal-title {
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
}

#setCapacityModal .modal-close {
    color: white;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

#setCapacityModal .modal-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

#setCapacityModal .modal-body {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
}

#setCapacityModal .modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--color-secondary-200);
    background: var(--color-secondary-50);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

[data-theme="dark"] #setCapacityModal .modal-footer {
    border-top-color: var(--color-secondary-700);
    background: var(--color-secondary-800);
}

/* Form Enhancements */
#setCapacityModal .form-group {
    margin-bottom: 1.5rem;
}

#setCapacityModal .form-label {
    font-weight: 600;
    color: var(--color-secondary-900);
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9375rem;
}

[data-theme="dark"] #setCapacityModal .form-label {
    color: var(--color-secondary-100);
}

#setCapacityModal .form-input,
#setCapacityModal .form-select {
    border-radius: 8px;
    border: 1px solid var(--color-secondary-200);
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
}

[data-theme="dark"] #setCapacityModal .form-input,
[data-theme="dark"] #setCapacityModal .form-select {
    border-color: var(--color-secondary-700);
}

#setCapacityModal .form-input:focus,
#setCapacityModal .form-select:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .capacity-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .pool-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .pool-header-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .pool-header-card {
        padding: 1.5rem;
    }
    
    .capacity-card {
        padding: 1.25rem;
    }
    
    #setCapacityModal .modal-container {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    #setCapacityModal .modal-header,
    #setCapacityModal .modal-body,
    #setCapacityModal .modal-footer {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .pool-metrics {
        grid-template-columns: 1fr;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Badge sizes */
.badge-sm {
    font-size: var(--text-xs);
    padding: 2px 8px;
    line-height: 1.4;
}

/* ============================================
   Skeleton Loading States
   ============================================ */
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--color-secondary-100, #f1f5f9) 25%, var(--color-secondary-200, #e2e8f0) 50%, var(--color-secondary-100, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.skeleton * { visibility: hidden; }
.skeleton-text { height: 14px; margin-bottom: 8px; width: 80%; }
.skeleton-text-short { height: 14px; margin-bottom: 8px; width: 40%; }
.skeleton-title { height: 22px; width: 60%; margin-bottom: 12px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card {
    height: 140px;
    border-radius: 12px;
    margin-bottom: 16px;
}
.skeleton-gauge {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.skeleton-row {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
}
.skeleton-row .skeleton-circle { flex-shrink: 0; }
.skeleton-row .skeleton-text { flex: 1; margin-bottom: 0; }
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--color-secondary-800, #1e293b) 25%, var(--color-secondary-700, #334155) 50%, var(--color-secondary-800, #1e293b) 75%);
    background-size: 200% 100%;
}

/* ===================================================================
   OBJECTIVE DETAIL PAGE - Redesigned
   =================================================================== */

/* Badges row in header */
.obj-detail-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Page layout */
.obj-detail-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Hero Section */
.obj-detail-hero {
    margin-bottom: 0;
}

.obj-detail-hero-inner {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .obj-detail-hero-inner {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-color: var(--color-secondary-700);
}

.obj-detail-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.obj-detail-gauge .progress-gauge {
    width: 140px;
    height: 140px;
}

.obj-detail-gauge .progress-gauge-number {
    font-size: 32px;
    font-weight: 700;
}

.obj-detail-gauge .progress-gauge-symbol {
    font-size: var(--text-lg);
}

.obj-detail-gauge-caption {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .obj-detail-gauge-caption {
    color: var(--color-secondary-400);
}

/* Stats chips */
.obj-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    flex: 1;
}

.obj-stat-chip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    min-width: 140px;
    flex: 1 1 140px;
    max-width: 220px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

[data-theme="dark"] .obj-stat-chip {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.obj-stat-chip:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

[data-theme="dark"] .obj-stat-chip:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.obj-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.obj-stat-kpis .obj-stat-icon {
    background: var(--color-info-light, #eff6ff);
    color: var(--color-info-main, #3b82f6);
}

.obj-stat-initiatives .obj-stat-icon {
    background: #fef3c7;
    color: #d97706;
}

.obj-stat-keyresults .obj-stat-icon {
    background: #f0fdf4;
    color: #16a34a;
}

.obj-stat-status .obj-stat-icon {
    background: var(--color-secondary-100);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .obj-stat-icon {
    background: var(--color-secondary-700);
}

.obj-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.obj-stat-count {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-secondary-900);
    line-height: 1.2;
}

[data-theme="dark"] .obj-stat-count {
    color: var(--color-secondary-100);
}

.obj-stat-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

[data-theme="dark"] .obj-stat-label {
    color: var(--color-secondary-400);
}

/* Two-column content layout */
.obj-detail-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6);
    align-items: start;
}

.obj-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

.obj-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: sticky;
    top: 80px;
}

/* Section cards */
.obj-detail-section {
    background: white;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

[data-theme="dark"] .obj-detail-section {
    background: var(--color-secondary-800);
    border-color: var(--color-secondary-700);
}

.obj-detail-section-compact {
    /* Used for sidebar sections */
}

.obj-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-secondary-100);
    background: var(--color-secondary-50);
    gap: var(--space-3);
}

[data-theme="dark"] .obj-section-header {
    border-bottom-color: var(--color-secondary-700);
    background: var(--color-secondary-850, rgba(15,23,42,0.5));
}

.obj-section-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-primary-600);
    min-width: 0;
}

[data-theme="dark"] .obj-section-header-left {
    color: var(--color-primary-400);
}

.obj-section-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
    white-space: nowrap;
}

[data-theme="dark"] .obj-section-title {
    color: var(--color-secondary-100);
}

.obj-section-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.obj-section-body {
    padding: var(--space-5) var(--space-6);
}

/* Description */
.obj-description {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-secondary-100);
}

[data-theme="dark"] .obj-description {
    border-bottom-color: var(--color-secondary-700);
}

.obj-description p {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-secondary-700);
    margin: 0;
}

[data-theme="dark"] .obj-description p {
    color: var(--color-secondary-300);
}

/* Info Grid */
.obj-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.obj-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-secondary-50);
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
}

[data-theme="dark"] .obj-info-item {
    background: var(--color-secondary-750, rgba(30,41,59,0.6));
}

.obj-info-item:hover {
    border-color: var(--color-secondary-200);
}

[data-theme="dark"] .obj-info-item:hover {
    border-color: var(--color-secondary-600);
}

.obj-info-item > i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-secondary-400);
}

[data-theme="dark"] .obj-info-item > i {
    color: var(--color-secondary-500);
}

.obj-info-item > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.obj-info-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

[data-theme="dark"] .obj-info-label {
    color: var(--color-secondary-400);
}

.obj-info-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-800);
    word-break: break-word;
}

[data-theme="dark"] .obj-info-value {
    color: var(--color-secondary-200);
}

/* ===================================================================
   KEY RESULTS CARDS - Redesigned
   =================================================================== */

.obj-kr-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.obj-kr-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
    gap: var(--space-4);
}

[data-theme="dark"] .obj-kr-card {
    background: var(--color-secondary-750, rgba(30,41,59,0.6));
    border-color: var(--color-secondary-700);
}

.obj-kr-card:hover {
    border-color: var(--color-primary-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .obj-kr-card:hover {
    border-color: var(--color-primary-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.obj-kr-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.obj-kr-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.obj-kr-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-secondary-900);
    margin: 0;
}

[data-theme="dark"] .obj-kr-title {
    color: var(--color-secondary-100);
}

.obj-kr-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--color-secondary-100);
    color: var(--color-secondary-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

[data-theme="dark"] .obj-kr-type-badge {
    background: var(--color-secondary-700);
    color: var(--color-secondary-300);
}

.obj-kr-desc {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.5;
    margin: 0;
}

[data-theme="dark"] .obj-kr-desc {
    color: var(--color-secondary-400);
}

.obj-kr-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.obj-kr-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--color-secondary-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

[data-theme="dark"] .obj-kr-progress-bar {
    background: var(--color-secondary-700);
}

.obj-kr-progress-fill {
    height: 100%;
    background: var(--color-primary-500);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
    min-width: 2px;
}

.obj-kr-metrics {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.obj-kr-metric-current {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .obj-kr-metric-current {
    color: var(--color-secondary-100);
}

.obj-kr-metric-current small,
.obj-kr-metric-target small {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary-500);
}

.obj-kr-metric-sep {
    font-size: var(--text-sm);
    color: var(--color-secondary-400);
}

.obj-kr-metric-target {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-500);
}

[data-theme="dark"] .obj-kr-metric-target {
    color: var(--color-secondary-400);
}

.obj-kr-metric-pct {
    margin-inline-start: auto;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary-600);
}

[data-theme="dark"] .obj-kr-metric-pct {
    color: var(--color-primary-400);
}

/* ===================================================================
   KPI CARDS in Objective Detail
   =================================================================== */

.obj-kpi-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.obj-kpi-card {
    padding: var(--space-5);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

[data-theme="dark"] .obj-kpi-card {
    background: var(--color-secondary-750, rgba(30,41,59,0.6));
    border-color: var(--color-secondary-700);
}

.obj-kpi-card:hover {
    border-color: var(--color-primary-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .obj-kpi-card:hover {
    border-color: var(--color-primary-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.obj-kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.obj-kpi-title-group {
    flex: 1;
    min-width: 0;
}

.obj-kpi-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

.obj-kpi-title a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-secondary-900);
    text-decoration: none;
    transition: color 0.2s ease;
}

.obj-kpi-title a i {
    color: var(--color-primary-500);
    flex-shrink: 0;
}

.obj-kpi-title a:hover {
    color: var(--color-primary-600);
}

[data-theme="dark"] .obj-kpi-title a {
    color: var(--color-secondary-100);
}

[data-theme="dark"] .obj-kpi-title a:hover {
    color: var(--color-primary-400);
}

.obj-kpi-code {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
    display: block;
}

[data-theme="dark"] .obj-kpi-code {
    color: var(--color-secondary-400);
}

.obj-kpi-desc {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.5;
    margin: var(--space-2) 0 0;
}

[data-theme="dark"] .obj-kpi-desc {
    color: var(--color-secondary-400);
}

.obj-kpi-values {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .obj-kpi-values {
    border-top-color: var(--color-secondary-600);
}

.obj-kpi-val {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.obj-kpi-val-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

[data-theme="dark"] .obj-kpi-val-label {
    color: var(--color-secondary-400);
}

.obj-kpi-val-num {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-secondary-900);
}

[data-theme="dark"] .obj-kpi-val-num {
    color: var(--color-secondary-100);
}

/* ===================================================================
   INITIATIVE CARDS in Objective Detail
   =================================================================== */

.obj-initiative-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.obj-init-card {
    padding: var(--space-5);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

[data-theme="dark"] .obj-init-card {
    background: var(--color-secondary-750, rgba(30,41,59,0.6));
    border-color: var(--color-secondary-700);
}

.obj-init-card:hover {
    border-color: var(--color-primary-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .obj-init-card:hover {
    border-color: var(--color-primary-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.obj-init-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.obj-init-title-group {
    flex: 1;
    min-width: 0;
}

.obj-init-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

.obj-init-title a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-secondary-900);
    text-decoration: none;
    transition: color 0.2s ease;
}

.obj-init-title a i {
    color: #d97706;
    flex-shrink: 0;
}

.obj-init-title a:hover {
    color: var(--color-primary-600);
}

[data-theme="dark"] .obj-init-title a {
    color: var(--color-secondary-100);
}

[data-theme="dark"] .obj-init-title a:hover {
    color: var(--color-primary-400);
}

.obj-init-code {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
    display: block;
}

[data-theme="dark"] .obj-init-code {
    color: var(--color-secondary-400);
}

.obj-init-desc {
    font-size: var(--text-sm);
    color: var(--color-secondary-600);
    line-height: 1.5;
    margin: var(--space-2) 0 0;
}

[data-theme="dark"] .obj-init-desc {
    color: var(--color-secondary-400);
}

.obj-init-progress {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-secondary-200);
}

[data-theme="dark"] .obj-init-progress {
    border-top-color: var(--color-secondary-600);
}

.obj-init-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-secondary-500);
}

[data-theme="dark"] .obj-init-progress-header {
    color: var(--color-secondary-400);
}

.obj-init-progress-pct {
    font-weight: 700;
    color: var(--color-secondary-700);
}

[data-theme="dark"] .obj-init-progress-pct {
    color: var(--color-secondary-200);
}

/* ===================================================================
   HIERARCHY SIDEBAR
   =================================================================== */

.obj-hierarchy-weight {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-secondary-50);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    color: var(--color-secondary-500);
}

[data-theme="dark"] .obj-hierarchy-weight {
    background: var(--color-secondary-750, rgba(30,41,59,0.6));
    color: var(--color-secondary-400);
}

.obj-hierarchy-weight-label {
    font-size: var(--text-sm);
    font-weight: 500;
    flex: 1;
}

.obj-hierarchy-weight-value {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-secondary-800);
}

[data-theme="dark"] .obj-hierarchy-weight-value {
    color: var(--color-secondary-200);
}

.obj-hierarchy-group {
    margin-bottom: var(--space-4);
}

.obj-hierarchy-group:last-child {
    margin-bottom: 0;
}

.obj-hierarchy-group-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-secondary-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-2) 0;
}

[data-theme="dark"] .obj-hierarchy-group-title {
    color: var(--color-secondary-400);
}

.obj-hierarchy-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--color-secondary-800);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background 0.15s ease;
    margin-bottom: var(--space-1);
    border: 1px solid transparent;
}

.obj-hierarchy-link:hover {
    background: var(--color-secondary-50);
    border-color: var(--color-secondary-200);
}

[data-theme="dark"] .obj-hierarchy-link {
    color: var(--color-secondary-200);
}

[data-theme="dark"] .obj-hierarchy-link:hover {
    background: var(--color-secondary-750, rgba(30,41,59,0.6));
    border-color: var(--color-secondary-600);
}

.obj-hierarchy-link-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.obj-hierarchy-link-pct {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary-500);
    flex-shrink: 0;
}

.obj-hierarchy-link-weight {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: #fef3c7;
    color: #92400e;
    flex-shrink: 0;
}

[data-theme="dark"] .obj-hierarchy-link-weight {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}

/* ===================================================================
   RESPONSIVE - Objective Detail
   =================================================================== */

@media (max-width: 1024px) {
    .obj-detail-content {
        grid-template-columns: 1fr;
    }

    .obj-detail-sidebar {
        position: static;
    }

    .obj-kpi-list,
    .obj-initiative-list {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (max-width: 768px) {
    .obj-detail-hero-inner {
        flex-direction: column;
        padding: var(--space-5);
        text-align: center;
    }

    .obj-detail-stats {
        justify-content: center;
    }

    .obj-stat-chip {
        max-width: none;
        flex: 1 1 calc(50% - var(--space-2));
    }

    .obj-info-grid {
        grid-template-columns: 1fr;
    }

    .obj-kpi-list,
    .obj-initiative-list {
        grid-template-columns: 1fr;
    }

    .obj-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .obj-section-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .obj-detail-gauge .progress-gauge {
        width: 110px;
        height: 110px;
    }

    .obj-detail-gauge .progress-gauge-number {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .obj-stat-chip {
        flex: 1 1 100%;
        max-width: none;
    }

    .obj-section-body {
        padding: var(--space-4);
    }

    .obj-section-header {
        padding: var(--space-3) var(--space-4);
    }
}