/* ============================================
   Fox Assistant - Complete UI Styles
   ============================================ */

/* CSS Variables - Dark Theme (default) */
:root, [data-theme="dark"] {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #16213e;
    --bg-input: #1e1e3a;
    --bg-hover: #252545;
    --bg-active: #2a2a4a;

    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b0;
    --text-muted: #606080;

    --accent-primary: #e94560;
    --accent-secondary: #ff6b6b;
    --accent-success: #4ecca3;
    --accent-warning: #ffd93d;
    --accent-info: #6bceff;

    /* Aliases for workflow-phases.css compatibility */
    --accent-color: #6366f1;
    --success-color: #22c55e;
    --error-color: #ef4444;
    --warning-color: #f59e0b;

    --border-color: #2a2a4a;
    --border-light: #1a1a3a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    --sidebar-width: 280px;
    --header-height: 56px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f8;
    --bg-tertiary: #eaeaf0;
    --bg-input: #ffffff;
    --bg-hover: #e8e8f0;
    --bg-active: #d8d8e8;

    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
    --text-muted: #8a8aa0;

    /* Aliases for workflow-phases.css compatibility */
    --accent-color: #6366f1;
    --success-color: #22c55e;
    --error-color: #ef4444;
    --warning-color: #f59e0b;

    --border-color: #d0d0e0;
    --border-light: #e0e0f0;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    display: flex;
}

/* ============================================
   Sidebar
   ============================================ */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    z-index: 100;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    color: white;
}

.logo-text {
    font-weight: 600;
    font-size: 1.1rem;
}

.sidebar-search {
    padding: 0.75rem 1rem;
}

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

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

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.nav-section {
    margin-bottom: 1rem;
}

.nav-section-title {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Administration section (tenant-scoped) — blue indicator */
.nav-section-title.nav-section-admin {
    color: var(--accent-info, #6bceff);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    border-left: 3px solid var(--accent-info, #6bceff);
    padding-left: calc(0.75rem - 3px);
}

/* Platform section — orange indicator (platform_admin only) */
.nav-section-title.nav-section-platform {
    color: var(--accent-warning, #ff9800);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    border-left: 3px solid var(--accent-warning, #ff9800);
    padding-left: calc(0.75rem - 3px);
}

/* Tools section — subtle accent */
.nav-section-title.nav-section-tools {
    color: var(--accent-success, #4ecca3);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

/* Tenant selector (platform_admin) */
.tenant-selector {
    background: var(--bg-input, #1e1e3a);
    color: var(--text-primary, #f0f0f5);
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: var(--radius-sm, 6px);
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conversation-item {
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
}

.conversation-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.conversation-item.active {
    background: var(--bg-active);
    color: var(--text-primary);
}

.conversation-item .conv-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.conversation-item .conv-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}

.conversation-item .conv-actions {
    display: none;
    gap: 0.25rem;
}

.conversation-item:hover .conv-actions {
    display: flex;
}

/* Demo Banner */
.demo-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,153,204,0.08));
    border-bottom: 1px solid rgba(0,212,255,0.2);
    backdrop-filter: blur(8px);
}

.demo-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    max-width: 1400px;
    margin: 0 auto;
    font-size: 13px;
}

.demo-banner-badge {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.demo-banner-text {
    color: var(--text-secondary, #aaa);
    flex: 1;
}

.demo-banner-cta {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 16px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.demo-banner-cta:hover { opacity: 0.85; }

.demo-banner-close {
    background: none;
    border: none;
    color: var(--text-muted, #666);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
}

/* Demo CTA (sidebar) */
.demo-cta {
    padding: 0.6rem 0.75rem;
    border-top: 1px solid rgba(0,212,255,0.15);
}

.demo-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.demo-cta-btn:hover { opacity: 0.85; }

.demo-cta-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
}

.demo-cta-sub a {
    color: var(--text-muted, #888);
    text-decoration: none;
}

.demo-cta-sub a:hover { color: #00d4ff; }

.demo-cta-sub span { color: var(--text-muted, #555); }

/* Demo welcome suggestions */
.demo-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.demo-suggestion-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-tertiary, rgba(255,255,255,0.04));
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 10px;
    color: var(--text-primary, #e0e0e0);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, border-color 0.2s;
}

.demo-suggestion-btn:hover {
    background: var(--bg-hover, rgba(255,255,255,0.08));
    border-color: rgba(0,212,255,0.3);
}

.demo-suggestion-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

/* Demo Tour Bar */
.demo-tour-bar {
    position: fixed;
    top: 42px;
    left: 0; right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    background: var(--bg-secondary, #1a1a2e);
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    font-size: 12px;
    flex-wrap: wrap;
}

.demo-tour-label {
    font-weight: 800;
    color: var(--text-muted, #888);
    letter-spacing: 0.5px;
    font-size: 11px;
    flex-shrink: 0;
}

.demo-tour-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #aaa);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.demo-tour-step:hover {
    border-color: rgba(0,212,255,0.4);
    color: #00d4ff;
}

.demo-tour-step.active {
    border-color: #00d4ff;
    color: #00d4ff;
    background: rgba(0,212,255,0.08);
}

.demo-tour-step.done {
    color: #2ecc71;
    border-color: rgba(46,204,113,0.3);
}

.demo-tour-step.done.active {
    color: #00d4ff;
    border-color: #00d4ff;
}

.demo-tour-step-icon { font-size: 14px; }

.demo-tour-done {
    margin-left: auto;
    padding: 5px 16px;
    border: 1px solid rgba(46,204,113,0.3);
    border-radius: 8px;
    background: rgba(46,204,113,0.08);
    color: #2ecc71;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.demo-tour-done:hover {
    background: rgba(46,204,113,0.15);
    border-color: rgba(46,204,113,0.5);
}

/* Demo Tour Toast */
.demo-tour-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1001;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 420px;
    padding: 14px 18px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid rgba(0,212,255,0.2);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: toastSlideIn 0.3s ease-out;
}

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

.demo-tour-toast-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }

.demo-tour-toast-text {
    color: var(--text-primary, #e0e0e0);
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
}

.demo-tour-toast-close {
    background: none;
    border: none;
    color: var(--text-muted, #666);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

/* Nav highlight animation */
.demo-tour-highlight {
    animation: navPulse 1s ease-in-out 3;
}

@keyframes navPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px rgba(0,212,255,0.3); border-radius: 8px; }
}

/* Offset main content when banner + tour bar visible */
body.demo-mode .main-content { margin-top: 42px; }
body.demo-mode .sidebar { padding-top: 42px; }
body.demo-mode.demo-tour-active .main-content { margin-top: 80px; }
body.demo-mode.demo-tour-active .sidebar { padding-top: 80px; }

/* Demo Suggestion Chips (above chat input) */
.demo-chips-bar {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    overflow-x: auto;
    flex-wrap: wrap;
}

.demo-chip {
    padding: 6px 14px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 20px;
    background: var(--bg-tertiary, rgba(255,255,255,0.04));
    color: var(--text-secondary, #aaa);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.demo-chip:hover {
    border-color: rgba(0,212,255,0.4);
    color: #00d4ff;
    background: rgba(0,212,255,0.06);
}

.sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}

.btn-sm {
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: background 0.2s;
    width: 100%;
}

.btn-sm:hover {
    background: var(--bg-hover);
}

.btn-sm svg {
    flex-shrink: 0;
}

.btn-muted {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.btn-muted:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* ============================================
   Buttons
   ============================================ */
.btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

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

.btn-primary {
    padding: 0.625rem 1rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s;
}

.btn-primary:hover {
    background: var(--accent-secondary);
}

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

.btn-secondary {
    padding: 0.625rem 1rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s;
}

.btn-secondary:hover {
    background: var(--bg-hover);
}

.btn-accent {
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s;
}

.btn-accent:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-accent:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Theme toggle icons */
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* ============================================
   Main Content
   ============================================ */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s, color 0.15s;
}

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

.tab.active {
    background: var(--accent-primary);
    color: white;
}

.tab svg {
    width: 18px;
    height: 18px;
}

/* Tab Content */
.tab-content {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
}

/* ============================================
   Chat Tab
   ============================================ */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
    animation: fadeIn 0.2s ease;
}

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

.message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.message.assistant .message-avatar {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
}

.message.user .message-avatar {
    background: var(--accent-info);
    color: white;
}

.message-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.message-text {
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.message.user .message-text {
    background: var(--accent-primary);
    color: white;
    border-color: transparent;
}

.message-text p {
    margin-bottom: 0.5rem;
}

.message-text p:last-child {
    margin-bottom: 0;
}

/* Markdown styles in messages */
.message-text h1, .message-text h2, .message-text h3 {
    margin: 1rem 0 0.5rem;
    font-weight: 600;
}

.message-text h1:first-child, .message-text h2:first-child, .message-text h3:first-child {
    margin-top: 0;
}

.message-text ul, .message-text ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.message-text li {
    margin: 0.25rem 0;
}

.message-text code {
    padding: 0.125rem 0.375rem;
    background: var(--bg-primary);
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.85em;
}

.message-text pre {
    margin: 0.75rem 0;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

.message-text pre code {
    padding: 0;
    background: none;
}

.message-text blockquote {
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid var(--accent-primary);
    background: var(--bg-primary);
}

.message-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
}

.message-text th, .message-text td {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.message-text th {
    background: var(--bg-primary);
}

/* Message actions */
.message-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.message:hover .message-actions {
    opacity: 1;
}

.message-action {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.message-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.message-action.active {
    color: var(--accent-primary);
}

/* Chat Input */
.chat-input-container {
    padding: 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.uploaded-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.uploaded-files:empty {
    display: none;
}

.uploaded-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.813rem;
}

.uploaded-file .file-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-info);
}

.uploaded-file .file-remove {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
}

.uploaded-file .file-remove:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}

.chat-input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.chat-input-wrapper textarea {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.938rem;
    font-family: inherit;
    resize: none;
    max-height: 200px;
    line-height: 1.5;
}

.chat-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.chat-input-wrapper textarea::placeholder {
    color: var(--text-muted);
}

.chat-status {
    margin-top: 0.5rem;
    font-size: 0.813rem;
    color: var(--text-muted);
}

.chat-status.error {
    color: var(--accent-primary);
}

.chat-status.success {
    color: var(--accent-success);
}

/* Loading animation */
.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

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

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

/* ============================================
   Documents Tab
   ============================================ */
.documents-container {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

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

.documents-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.documents-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.documents-filters input,
.documents-filters select {
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.documents-filters input {
    flex: 1;
    max-width: 300px;
}

.documents-filters input:focus,
.documents-filters select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

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

.document-card {
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.document-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.document-card.empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    cursor: default;
}

.document-card.empty:hover {
    border-color: var(--border-color);
    box-shadow: none;
}

.document-icon {
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

.document-card .doc-name {
    font-weight: 500;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-card .doc-meta {
    font-size: 0.813rem;
    color: var(--text-muted);
}

.text-muted {
    color: var(--text-muted);
}

/* ============================================
   ACTIONS TAB STYLES - Professional Dashboard
   ============================================ */

.actions-dashboard {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    background: var(--bg-primary);
}

/* Header */
.actions-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.actions-title-section h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.actions-title-section p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* KPI Row */
.actions-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

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

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

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

.kpi-content {
    display: flex;
    flex-direction: column;
}

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

.kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Main Grid */
.actions-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.actions-left-col,
.actions-right-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Cards */
.actions-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.actions-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.actions-card .card-header h2 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.card-badge {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    background: var(--accent-primary);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

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

/* Action Tiles */
.quick-actions-list {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    text-align: left;
}

.action-tile:hover {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

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

.tile-icon.email { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.tile-icon.crm { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.tile-icon.doc { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.tile-icon.export { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.tile-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tile-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tile-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tile-arrow {
    color: var(--text-muted);
    font-size: 1.25rem;
}

/* Process Steps */
.info-card .card-header {
    background: transparent;
    border-bottom: none;
    padding-bottom: 0;
}

.process-steps {
    padding: 0 1.25rem 1rem;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.process-step:last-child {
    border-bottom: none;
}

.step-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.step-content strong {
    display: block;
    font-size: 0.813rem;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.step-content p {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

/* Risk Legend */
.risk-legend {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1.25rem;
    flex-wrap: wrap;
}

.risk-tag {
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.688rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.risk-tag.low { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.risk-tag.medium { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.risk-tag.high { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.risk-tag.critical { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

/* Empty State */
.pending-list,
.journal-list {
    min-height: 200px;
    padding: 1rem;
}

.empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: var(--text-muted);
    text-align: center;
}

.empty-placeholder svg {
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.empty-placeholder span {
    font-size: 0.813rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .actions-main-grid {
        grid-template-columns: 1fr;
    }
    .actions-kpi-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CRM Tab
   ============================================ */
.crm-container {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.crm-header {
    margin-bottom: 1.5rem;
}

.crm-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

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

.stat-card {
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-primary);
}

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

.crm-quick-actions {
    margin-bottom: 1.5rem;
}

.crm-quick-actions h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.quick-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quick-action {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

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

.crm-results {
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-height: 200px;
}

/* ============================================
   Settings Tab
   ============================================ */
.settings-container {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    max-width: 600px;
}

.settings-container h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.settings-section {
    margin-bottom: 2rem;
}

.settings-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}

.setting-row label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.setting-row select,
.setting-row input[type="text"] {
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
    min-width: 180px;
}

.setting-row input[type="range"] {
    flex: 1;
    max-width: 150px;
}

/* LLM Registry Settings (Sprint 9.0) */
.llm-roles-list { display: flex; flex-direction: column; gap: 0.25rem; }
.llm-category-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.05em; margin-top: 1rem; margin-bottom: 0.25rem; }
.llm-role-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); background: var(--bg-input); }
.llm-role-info { flex: 1; min-width: 0; }
.llm-role-info strong { font-size: 0.813rem; }
.llm-role-info small { font-size: 0.7rem; color: var(--text-secondary); }
.llm-role-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.llm-model-select { padding: 0.35rem 0.5rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.75rem; min-width: 160px; }
.llm-vram-info { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; }
.badge-rgpd { font-size: 0.65rem; padding: 0.15rem 0.4rem; border-radius: 3px; background: rgba(78,204,163,0.2); color: #4ecca3; font-weight: 600; }
.badge-non-rgpd { font-size: 0.65rem; padding: 0.15rem 0.4rem; border-radius: 3px; background: rgba(255,100,100,0.2); color: #ff6464; font-weight: 600; }
.vram-badge { font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-lg); font-weight: 500; }
.vram-ok { background: rgba(78,204,163,0.15); color: #4ecca3; }
.vram-warning { background: rgba(255,165,0,0.15); color: #ffa500; }

/* Auto-configure (Sprint 9.1) */
.auto-configure-results { margin-bottom: 1rem; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--bg-input); }
.detect-system-info { font-size: 0.8rem; margin-bottom: 0.75rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: var(--radius-sm); }
.detect-system-info strong { color: var(--text-primary); }
.detect-change { padding: 0.4rem 0.5rem; border-left: 3px solid #ffa500; margin-bottom: 0.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(255,165,0,0.05); }
.detect-nochange { padding: 0.4rem 0.5rem; border-left: 3px solid var(--border-color); margin-bottom: 0.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rec-score { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 3px; background: rgba(78,204,163,0.2); color: #4ecca3; margin-left: 0.5rem; }
.rec-reasons { font-size: 0.65rem; color: var(--text-secondary); margin-top: 0.15rem; }
.detect-success { text-align: center; padding: 0.5rem; color: #4ecca3; font-size: 0.85rem; font-weight: 500; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.75rem; }

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-lg);
    font-size: 0.813rem;
    font-weight: 500;
}

.status-badge.online {
    background: rgba(78, 204, 163, 0.2);
    color: var(--accent-success);
}

.status-badge.offline {
    background: rgba(233, 69, 96, 0.2);
    color: var(--accent-primary);
}

/* ============================================
   Modal
   ============================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    width: 90%;
    max-width: 500px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.modal-close {
    font-size: 1.5rem;
    line-height: 1;
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Feedback Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.feedback-modal {
    width: 90%;
    max-width: 420px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.feedback-rating-section {
    margin-bottom: 1.25rem;
}

.feedback-rating-section label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.star-rating-input {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.star-rating-input .star-btn {
    font-size: 2rem;
    line-height: 1;
    background: none;
    border: none;
    color: var(--border-color);
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.15s ease;
}

.star-rating-input .star-btn:hover,
.star-rating-input .star-btn.hover {
    color: #fbbf24;
    transform: scale(1.1);
}

.star-rating-input .star-btn.active {
    color: #fbbf24;
}

.rating-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.feedback-comment-section label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.feedback-comment-section textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.feedback-comment-section textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.feedback-comment-section textarea::placeholder {
    color: var(--text-muted);
}

/* Feedback Toast */
.feedback-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 3000;
    opacity: 0;
    transition: all 0.3s ease;
}

.feedback-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.feedback-toast.success {
    background: #22c55e;
    color: white;
}

.feedback-toast.error {
    background: #ef4444;
    color: white;
}

.feedback-toast.info {
    background: var(--primary);
    color: white;
}

/* ============================================
   Mobile Responsive
   ============================================ */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 200;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tabs {
        padding-left: 3.5rem;
    }

    .message {
        max-width: 95%;
    }

    .documents-grid {
        grid-template-columns: 1fr;
    }

    .crm-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   Sidebar Session Info
   ============================================ */
.sidebar-session {
    padding: 0.75rem 1rem;
}

.session-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.75rem;
}

.session-info label {
    color: var(--text-muted);
}

.session-info-clickable {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    transition: background 0.15s;
}

.session-info-clickable:hover {
    background: var(--bg-tertiary);
}

/* Credential modal status rows */
.cred-modal-status { display: flex; flex-direction: column; gap: 0.375rem; }
.cred-status-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.cred-label { color: var(--text-secondary); }

/* Credential gate overlay (on tab-content) */
.tab-content { position: relative; }

.session-info span {
    color: var(--text-secondary);
    font-family: monospace;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 1rem;
}

.sidebar-settings {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.setting-item {
    margin-bottom: 0.75rem;
}

.setting-item:last-child {
    margin-bottom: 0;
}

.setting-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Theme Buttons */
.theme-buttons {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-tertiary);
    padding: 0.25rem;
    border-radius: var(--radius-sm);
}

.theme-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.theme-btn.active {
    background: var(--accent-primary);
    color: white;
}

/* Slider Row */
.slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.slider-row input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 2px;
    cursor: pointer;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
}

.slider-row input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.slider-row span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 2.5rem;
    text-align: right;
}

.setting-item input[type="range"] {
    width: calc(100% - 40px);
    vertical-align: middle;
}

.setting-item span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.footer-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.full-width {
    width: 100%;
}

/* ============================================
   Navigation Buttons
   ============================================ */
.nav-btn {
    width: 100%;
    padding: 0.625rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: left;
    text-decoration: none;
}

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

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

.nav-btn svg {
    flex-shrink: 0;
}

/* Menu notification badge */
.menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: #e94560;
    border-radius: 9px;
    animation: badge-pulse 2s infinite;
}

.menu-badge.urgent {
    background: #dc2626;
    animation: badge-pulse-urgent 1s infinite;
}

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

@keyframes badge-pulse-urgent {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

.nav-btn.active .menu-badge {
    background: white;
    color: var(--accent-primary);
}

/* Action Type Badges (Compliance module) */
.action-type-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
}

.action-type-badge.action-approved {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.action-type-badge.action-rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.action-type-badge.action-submitted {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.action-type-badge.action-started {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.action-type-badge.action-completed {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.action-type-badge.action-po {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.action-type-badge.action-email {
    background: rgba(236, 72, 153, 0.2);
    color: #ec4899;
}

/* ============================================
   5-Star Feedback
   ============================================ */
.feedback-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.feedback-label {
    font-size: 0.813rem;
    color: var(--text-muted);
}

.star-rating {
    display: flex;
    gap: 0.25rem;
}

.star-btn {
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.star-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-warning);
    color: var(--accent-warning);
}

.star-btn.active {
    background: var(--accent-warning);
    border-color: var(--accent-warning);
    color: var(--bg-primary);
}

.feedback-status {
    font-size: 0.75rem;
    color: var(--accent-success);
}

/* ============================================
   Sub-tabs - Unified Department Style
   ============================================ */
.sub-tabs {
    display: flex;
    gap: 0.375rem;
    padding: 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    width: fit-content;
}

.sub-tab {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.sub-tab.active {
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

.sub-content {
    display: none;
    padding: 1rem;
}

.sub-content.active {
    display: block;
}

/* ============================================
   Forms
   ============================================ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.checkbox-group,
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.checkbox-group label,
.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.813rem;
    color: var(--text-primary);
    cursor: pointer;
}

.checkbox-group input,
.radio-group input {
    accent-color: var(--accent-primary);
}

/* ============================================
   Results Section
   ============================================ */
.results-section {
    margin-top: 1.5rem;
}

.summary-box {
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.chart-container {
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: visible;
}

.chart-container > div {
    overflow: visible !important;
}

.chart-container.full-width {
    grid-column: 1 / -1;
}

.chart-container h4 {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

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

/* ============================================
   Data Tables
   ============================================ */
.data-table-container {
    overflow-x: auto;
}

.data-table-container h4 {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.813rem;
}

.data-table th,
.data-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
}

.data-table tr:hover td {
    background: var(--bg-hover);
}

/* ============================================
   GP Container & Layout
   ============================================ */
.gp-container {
    padding: 1.5rem;
    max-height: calc(100vh - var(--header-height) - 100px);
    overflow-y: auto;
}

.gp-container h2 {
    margin-bottom: 0.5rem;
}

.gp-container .results-section {
    margin-top: 1.5rem;
    overflow-x: auto;
}

/* ============================================
   GP Comparison Table
   ============================================ */
.gp-comparison-table {
    font-size: 0.85rem;
    width: 100%;
    min-width: 900px;
}

.gp-comparison-table .header-group th {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 0.5rem;
}

.gp-comparison-table .group-po {
    background: rgba(99, 102, 241, 0.2);
    border-bottom: 2px solid var(--accent-info);
}

.gp-comparison-table .group-ar {
    background: rgba(78, 204, 163, 0.2);
    border-bottom: 2px solid var(--accent-success);
}

.gp-comparison-table .group-result {
    background: rgba(233, 69, 96, 0.2);
    border-bottom: 2px solid var(--accent-primary);
}

.gp-comparison-table .group-po-end {
    border-right: 2px solid var(--accent-info);
}

.gp-comparison-table .group-ar-end {
    border-right: 2px solid var(--accent-success);
}

.gp-comparison-table .col-code {
    width: 100px;
    font-family: monospace;
}

.gp-comparison-table .col-desc {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gp-comparison-table .col-qty {
    width: 60px;
    text-align: right;
}

.gp-comparison-table .col-price {
    width: 100px;
    text-align: right;
}

.gp-comparison-table .col-ecart {
    width: 90px;
    text-align: right;
}

.gp-comparison-table .col-status {
    width: 80px;
    text-align: center;
}

.gp-comparison-table tbody td {
    vertical-align: middle;
}

.gp-comparison-table tbody tr.status-ok {
    background: rgba(78, 204, 163, 0.1);
}

.gp-comparison-table tbody tr.status-warning {
    background: rgba(255, 217, 61, 0.1);
}

.gp-comparison-table tbody tr.status-diff {
    background: rgba(233, 69, 96, 0.1);
}

.gp-comparison-table .text-success {
    color: var(--accent-success);
}

.gp-comparison-table .text-danger {
    color: var(--accent-primary);
}

.gp-comparison-table .status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.gp-comparison-table .status-ok {
    background: var(--accent-success);
    color: #000;
}

.gp-comparison-table .status-po-only {
    background: var(--accent-warning);
    color: #000;
}

.gp-comparison-table .status-ar-only {
    background: var(--accent-info);
    color: #000;
}

.gp-comparison-table tfoot td {
    font-weight: 700;
    background: var(--bg-tertiary);
    border-top: 2px solid var(--border-color);
}

/* ============================================
   GP Schedule View (Professional Dashboard)
   ============================================ */
.gp-schedule-view {
    padding: 0;
}

/* Department/Schedule Tabs (inner tabs like "En cours / Terminées") */
.department-tabs {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
    padding: 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    width: fit-content;
}

.department-tab {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.department-tab.active {
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

/* Summary Cards */
.department-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all 0.2s ease;
}

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

.summary-card .summary-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.summary-card .summary-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card.summary-danger {
    border-left: 4px solid var(--accent-primary);
}

.summary-card.summary-danger .summary-value {
    color: var(--accent-primary);
}

.summary-card.summary-warning {
    border-left: 4px solid var(--accent-warning);
}

.summary-card.summary-warning .summary-value {
    color: var(--accent-warning);
}

.summary-card.summary-info {
    border-left: 4px solid var(--accent-info);
}

.summary-card.summary-info .summary-value {
    color: var(--accent-info);
}

.summary-card.summary-success {
    border-left: 4px solid var(--accent-success);
}

.summary-card.summary-success .summary-value {
    color: var(--accent-success);
}

.summary-card.summary-neutral {
    border-left: 4px solid var(--text-muted);
}

.summary-card.summary-neutral .summary-value {
    color: var(--text-primary);
}

/* Commercial Schedule View - integrates with commercial.css sub-tabs */
.commercial-schedule-view {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

/* Ensure schedule table container fills available space in commercial */
.commercial-schedule-view .schedule-table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Action indicator for commercial actions */
.action-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent-warning);
    border-radius: 50%;
    margin-left: 0.5rem;
    animation: pulse 2s infinite;
}

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

/* Schedule Table Container */
.schedule-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Schedule Table */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.schedule-table thead {
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-color);
}

.schedule-table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.schedule-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.schedule-table tbody tr {
    transition: background 0.15s ease;
}

.schedule-table tbody tr:hover {
    background: var(--bg-hover);
}

.schedule-table tbody tr:last-child td {
    border-bottom: none;
}

/* Row urgency states */
.schedule-table tr.row-overdue {
    background: rgba(233, 69, 96, 0.08);
}

.schedule-table tr.row-overdue:hover {
    background: rgba(233, 69, 96, 0.15);
}

.schedule-table tr.row-warning {
    background: rgba(255, 217, 61, 0.08);
}

.schedule-table tr.row-warning:hover {
    background: rgba(255, 217, 61, 0.15);
}

/* Status Badges (Schedule) */
.schedule-table .status-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.schedule-table .status-badge.status-danger {
    background: rgba(233, 69, 96, 0.2);
    color: var(--accent-primary);
}

.schedule-table .status-badge.status-warning {
    background: rgba(255, 217, 61, 0.2);
    color: #c9a000;
}

.schedule-table .status-badge.status-success {
    background: rgba(78, 204, 163, 0.2);
    color: var(--accent-success);
}

/* Phase Badge */
.phase-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-info);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Action Button */
.btn-action {
    padding: 0.375rem 0.75rem;
    background: var(--accent-info);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-action:hover {
    background: var(--accent-info-hover, #818cf8);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

/* Text alignment for amounts */
.schedule-table .text-right {
    text-align: right;
    font-family: 'Fira Code', monospace;
    font-weight: 500;
}

/* ============================================
   Status Cards (Monitoring)
   ============================================ */
.status-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.status-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.status-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
}

.status-icon.online {
    background: var(--accent-success);
    box-shadow: 0 0 8px var(--accent-success);
}

.status-icon.offline {
    background: var(--accent-primary);
}

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

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

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

.logs-section h3 {
    margin-bottom: 0.75rem;
}

.logs-output {
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.75rem;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    color: var(--text-secondary);
}

/* ============================================
   DocWriter & PPT
   ============================================ */
.docwriter-container,
.ppt-container {
    padding: 1.5rem;
}

.document-output,
.ppt-preview {
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-height: 200px;
}

.doc-actions,
.ppt-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ============================================
   Sources Display
   ============================================ */
.sources-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.sources-title {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.source-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.813rem;
}

.source-item a {
    color: var(--accent-info);
    text-decoration: none;
}

.source-item a:hover {
    text-decoration: underline;
}

.source-number {
    color: var(--text-muted);
    font-weight: 600;
    min-width: 1.5rem;
}

.source-name {
    color: var(--accent-info);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-link {
    color: var(--accent-info);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.source-link:hover {
    text-decoration: underline;
    color: var(--accent-primary);
}

.source-type {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.688rem;
    text-transform: uppercase;
}

.source-score {
    color: var(--accent-success);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 2.5rem;
    text-align: right;
}

.sources-list {
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

/* ============================================
   Form Actions & Status
   ============================================ */
.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

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

/* ============================================
   Progress Bar
   ============================================ */
.progress-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    margin: 1rem 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

/* ============================================
   Document Output
   ============================================ */
.document-output {
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
    padding: 1rem;
    min-height: 200px;
    margin-bottom: 1rem;
}

.doc-preview {
    white-space: pre-wrap;
    font-family: inherit;
    margin: 0;
    line-height: 1.6;
}

.doc-actions {
    display: flex;
    gap: 0.5rem;
}

/* ============================================
   PPT Preview
   ============================================ */
.ppt-preview {
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
    padding: 1rem;
    min-height: 200px;
    margin-bottom: 1rem;
}

.ppt-info {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

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

.slide-preview {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.75rem;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
}

.slide-number {
    font-size: 0.688rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.slide-title {
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slide-content {
    font-size: 0.688rem;
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
}

.ppt-actions {
    display: flex;
    gap: 0.5rem;
}

/* ============================================
   Loading State
   ============================================ */
.loading {
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================
   Utilities
   ============================================ */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ============================================
   Wizard Steps (GP Tab)
   ============================================ */
.wizard-steps {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.wizard-step.active {
    opacity: 1;
}

.wizard-step.completed {
    opacity: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.wizard-step.active .step-number {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.wizard-step.completed .step-number {
    background: var(--accent-success);
    border-color: var(--accent-success);
    color: white;
}

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

.detection-result {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

/* ============================================
   Tool Cards
   ============================================ */
.tools-list, .tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.tool-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: border-color 0.2s, transform 0.2s;
}

.tool-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.tool-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--accent-primary);
    font-size: 0.875rem;
}

.tool-card p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ============================================
   CodeBot Layout
   ============================================ */
.codebot-chat, .cb2-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 300px);
    min-height: 400px;
}

.cb2-layout {
    flex-direction: row;
    gap: 1rem;
}

.cb2-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cb2-sidebar {
    width: 250px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.cb2-sidebar h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.todos-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.todo-item {
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.25rem;
    font-size: 0.813rem;
}

.todo-item.pending { background: var(--bg-secondary); }
.todo-item.in_progress { background: rgba(107, 206, 255, 0.2); }
.todo-item.completed { background: rgba(78, 204, 163, 0.2); text-decoration: line-through; }

.codebot-options {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.codebot-options label {
    font-size: 0.813rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.code-output {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1rem;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.813rem;
}

.arch-diagram {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    overflow-x: auto;
}

/* ============================================
   Benchmark Cards
   ============================================ */
.benchmark-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.bench-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
}

.bench-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.bench-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
}

/* ============================================
   Analysis Cards (RApOff)
   ============================================ */
.ao-analysis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.analysis-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.analysis-card h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.decision-panel {
    text-align: center;
    padding: 2rem;
}

.decision-gauge {
    width: 200px;
    height: 100px;
    margin: 1rem auto;
    background: var(--bg-tertiary);
    border-radius: 100px 100px 0 0;
}

.decision-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-success {
    background: var(--accent-success);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
}

.btn-danger {
    background: var(--accent-error);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
}

.technique-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tech-tab {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.813rem;
}

.tech-tab.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.tech-content {
    display: none;
}

.tech-content.active {
    display: block;
}

/* Planning specific styles */
.planning-quantities-grid input {
    width: 100%;
}

#planningResults .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

#planningScenariosTable tr:nth-child(odd) {
    background: var(--bg-tertiary);
}

/* ============================================
   Compliance Cards
   ============================================ */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.compliance-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.compliance-card h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.compliance-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compliance-checklist li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.compliance-checklist li.checked::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-success);
    font-weight: bold;
}

.metric-gauge {
    text-align: center;
    padding: 1rem;
}

.gauge-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-success);
}

.gauge-label {
    font-size: 0.813rem;
    color: var(--text-muted);
}

.status-badge.compliant {
    background: var(--accent-success);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ============================================
   Veille Feed
   ============================================ */
.veille-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.veille-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.veille-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1rem;
    border-left: 3px solid var(--accent-primary);
}

.veille-card h4 {
    margin: 0.5rem 0;
}

.veille-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================
   Toolbar
   ============================================ */
.toolbar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

.toolbar input[type="text"] {
    flex: 1;
    max-width: 300px;
}

/* ============================================
   Roles & Permissions Grid
   ============================================ */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.permissions-matrix {
    overflow-x: auto;
}

.capabilities-matrix {
    overflow-x: auto;
}

/* ============================================
   Updates List
   ============================================ */
.updates-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.update-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.commands-output {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.813rem;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
}

/* ============================================
   Governance Role Cards
   ============================================ */
.governance-role-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border-color);
}

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

.governance-role-card .role-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.governance-role-card .access-level {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--accent-secondary);
    color: var(--text-primary);
}

.governance-role-card .role-capabilities h5,
.governance-role-card .role-restrictions h5 {
    font-size: 0.85rem;
    margin: 0.5rem 0;
    color: var(--text-secondary);
}

.governance-role-card ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.85rem;
}

.governance-role-card li {
    margin: 0.25rem 0;
    color: var(--text-secondary);
}

.governance-role-card li.restriction {
    color: var(--error);
}

/* ============================================
   Quotas Grid
   ============================================ */
.quotas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.quota-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.quota-bar {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.quota-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.3s;
}

/* ============================================
   Access Management Module - Professional UI
   ============================================ */

/* Container */
.access-container {
    padding: 1.5rem;
}

.access-container > h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.access-container > h2::before {
    content: "\1F512";
    font-size: 1.25rem;
}

.access-container > .text-muted {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

/* Sub-tabs for Access (unified style with icons) */
#tab-access .sub-tabs {
    display: flex;
    gap: 0.375rem;
    padding: 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    width: fit-content;
}

#tab-access .sub-tab {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#tab-access .sub-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

#tab-access .sub-tab.active {
    background: var(--accent-primary);
    color: white;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

#tab-access .sub-tab[data-subtab="access-users"]::before { content: "\1F465"; }
#tab-access .sub-tab[data-subtab="access-perms"]::before { content: "\1F511"; }
#tab-access .sub-tab[data-subtab="access-roles"]::before { content: "\1F3AD"; }
#tab-access .sub-tab[data-subtab="access-audit"]::before { content: "\1F4CB"; }

/* Main Layout */
.access-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}

.access-main {
    min-width: 0;
}

/* Toolbar */
.access-main .toolbar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
}

.access-main .toolbar input[type="text"] {
    flex: 1;
    padding: 0.625rem 1rem;
    padding-left: 2.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1rem;
}

.access-main .toolbar input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Users Table */
#accessUsersTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#accessUsersTable thead {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}

#accessUsersTable thead th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

#accessUsersTable tbody tr {
    cursor: pointer;
    transition: all 0.15s ease;
}

#accessUsersTable tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}

#accessUsersTable tbody tr.selected {
    background: rgba(99, 102, 241, 0.12);
    box-shadow: inset 4px 0 0 var(--accent-primary);
}

#accessUsersTable tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

#accessUsersTable tbody tr:last-child td {
    border-bottom: none;
}

/* Role badges in table */
#accessUsersTable .role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

#accessUsersTable .role-badge.admin {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

#accessUsersTable .role-badge.manager {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

#accessUsersTable .role-badge.employee {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

#accessUsersTable .role-badge.external {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* Level indicator */
#accessUsersTable .level-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#accessUsersTable .level-bar {
    width: 60px;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}

#accessUsersTable .level-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

#accessUsersTable .level-fill.high { background: linear-gradient(90deg, #ef4444, #f97316); }
#accessUsersTable .level-fill.medium { background: linear-gradient(90deg, #f59e0b, #eab308); }
#accessUsersTable .level-fill.low { background: linear-gradient(90deg, #3b82f6, #6366f1); }

/* Menu count */
#accessUsersTable .menu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Sidebar */
.access-sidebar {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
    border: 1px solid var(--border-color);
}

.access-sidebar h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.access-sidebar h4::before {
    content: "\1F464";
    font-size: 1rem;
}

.access-sidebar hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.25rem 0;
}

/* User details panel */
.user-details-panel {
    font-size: 0.875rem;
}

.user-details-panel .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.user-details-panel .detail-row:last-child {
    border-bottom: none;
}

.user-details-panel .detail-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.user-details-panel .detail-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* ==========================================
   Credentials Management
   ========================================== */
.credentials-layout {
    max-width: 600px;
}

.credentials-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
}

.credentials-card h4 {
    margin: 0 0 1rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.credentials-status {
    margin-bottom: 1rem;
}

.credentials-status .status-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.credentials-status .status-row:last-child {
    border-bottom: none;
}

.credentials-status .status-label {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.credentials-status .status-value {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.credentials-status .status-value.success {
    color: var(--accent-success);
}

.credentials-form {
    margin-top: 1rem;
}

.credentials-form h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.credentials-form .form-group {
    position: relative;
    margin-bottom: 1rem;
}

.credentials-form .form-group input {
    padding-right: 3rem;
}

.btn-toggle-password {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
    opacity: 0.7;
}

.btn-toggle-password:hover {
    opacity: 1;
}

.button-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

#subtab-access-credentials hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

/* Accordion (details/summary) */
.accordion {
    margin-top: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.accordion summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s ease;
}

.accordion summary::before {
    content: "+";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--accent-primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.accordion[open] summary::before {
    content: "-";
    transform: rotate(180deg);
}

.accordion summary:hover {
    background: var(--bg-secondary);
}

.accordion[open] summary {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.accordion-content {
    padding: 1.25rem;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* Form elements */
.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.form-group {
    flex: 1;
    min-width: 150px;
}

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

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group input[readonly] {
    opacity: 0.7;
    cursor: default;
    background: var(--bg-tertiary);
}

/* Status messages */
.status-message {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.813rem;
    font-weight: 500;
}

.status-message.success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-message.success::before {
    content: "\2713";
}

.status-message.error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-message.error::before {
    content: "\2717";
}

/* ===== PERMISSIONS SUB-TAB ===== */
#subtab-access-perms h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

#subtab-access-perms h3::before {
    content: "\1F511";
}

.perm-details {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin: 1rem 0;
    border: 1px solid var(--border-color);
}

.perm-details h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.perm-details .user-perm-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.perm-details .perm-stat {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.perm-details .perm-stat .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

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

/* Permissions config - Professional card style */
.perm-config {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.perm-column {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
}

.perm-column:first-child {
    border-left: 4px solid #22c55e;
}

.perm-column:last-child {
    border-left: 4px solid #ef4444;
}

.perm-column h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.perm-column:first-child h4::before { content: "\2705"; }
.perm-column:last-child h4::before { content: "\1F6AB"; }

/* Checkbox group - Modern toggle style */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.813rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.checkbox-group label:hover {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

.checkbox-group input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.checkbox-group label:has(input:checked) {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: 500;
}

/* Denied menus - red styling when checked */
#accessDeniedMenus label:has(input:checked) {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

/* ===== ROLES SUB-TAB ===== */
#subtab-access-roles h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#subtab-access-roles h3::before {
    content: "\1F3AD";
}

.roles-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.roles-info .role-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.roles-info .role-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.roles-info .role-card.admin::before { background: linear-gradient(90deg, #ef4444, #f97316); }
.roles-info .role-card.direction::before { background: linear-gradient(90deg, #8b5cf6, #a855f7); }
.roles-info .role-card.manager::before { background: linear-gradient(90deg, #f59e0b, #eab308); }
.roles-info .role-card.employee::before { background: linear-gradient(90deg, #3b82f6, #6366f1); }
.roles-info .role-card.external::before { background: linear-gradient(90deg, #6b7280, #9ca3af); }

.roles-info .role-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.roles-info .role-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.roles-info .role-card .role-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.roles-info .role-card.admin .role-icon { background: rgba(239, 68, 68, 0.15); }
.roles-info .role-card.direction .role-icon { background: rgba(139, 92, 246, 0.15); }
.roles-info .role-card.manager .role-icon { background: rgba(245, 158, 11, 0.15); }
.roles-info .role-card.employee .role-icon { background: rgba(59, 130, 246, 0.15); }
.roles-info .role-card.external .role-icon { background: rgba(107, 114, 128, 0.15); }

.roles-info .role-card p {
    margin: 0.5rem 0;
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.roles-info .role-card .role-level {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--bg-secondary);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.roles-info .role-card .menus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.roles-info .role-card .menu-tag {
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.688rem;
    color: var(--text-secondary);
}

/* ===== WORKFLOW ROLES SUB-TAB ===== */
.workflow-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.wf-role-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.wf-role-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

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

.wf-role-header h4 {
    margin: 0;
    font-size: 0.938rem;
    color: var(--text-primary);
}

.wf-role-header .badge {
    background: var(--accent-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wf-role-users {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.75rem;
    max-height: 150px;
    overflow-y: auto;
}

.wf-role-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.813rem;
}

.wf-role-user span {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-role-user .btn-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    min-width: auto;
}

.wf-role-user .btn-danger {
    background: transparent;
    color: var(--accent-primary);
    border: none;
}

.wf-role-user .btn-danger:hover {
    background: var(--accent-primary);
    color: white;
}

/* RACI Matrix Table */
.raci-table {
    font-size: 0.813rem;
}

.raci-table th,
.raci-table td {
    padding: 0.5rem;
    text-align: center;
    vertical-align: middle;
}

.raci-table .task-cell {
    background: var(--bg-secondary);
    text-align: left;
    vertical-align: top;
}

.raci-table .raci-r { color: var(--accent-primary); font-weight: 600; }
.raci-table .raci-a { color: var(--accent-warning); font-weight: 600; }
.raci-table .raci-c { color: var(--accent-info); }
.raci-table .raci-i { color: var(--text-muted); }

/* ===== WORKFLOW VIEWER MODAL ===== */
.workflow-viewer-modal .modal-content {
    max-width: 900px;
    max-height: 85vh;
}

.workflow-viewer-modal .modal-body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.workflow-viewer-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0 1rem;
}

.viewer-tab {
    padding: 0.875rem 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

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

.viewer-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.viewer-content {
    display: none;
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(85vh - 180px);
}

.viewer-content.active {
    display: block;
}

/* Flow Diagram */
.workflow-flow-diagram {
    padding: 1rem;
}

.flow-tasks {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
}

.flow-task {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    width: 100%;
    max-width: 500px;
}

.flow-task-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.flow-task-icon {
    color: var(--accent-primary);
}

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

.flow-deadline {
    background: var(--accent-warning);
    color: #000;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.flow-task-desc {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.flow-subtasks {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.flow-subtask {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.813rem;
}

.flow-subtask-num {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.688rem;
    font-weight: 600;
}

.flow-subtask-name {
    flex: 1;
    color: var(--text-primary);
}

.flow-subtask-responsible {
    color: var(--accent-info);
    font-size: 0.75rem;
    font-weight: 500;
}

.flow-arrow {
    padding: 0.5rem;
    color: var(--text-muted);
}

/* RACI Matrix in Viewer */
.raci-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.813rem;
}

.raci-matrix-table th,
.raci-matrix-table td {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color);
    text-align: center;
}

.raci-matrix-table thead th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.raci-matrix-table .role-header {
    font-size: 0.75rem;
    white-space: nowrap;
}

.raci-matrix-table .task-cell {
    background: var(--bg-tertiary);
    font-weight: 600;
    text-align: left;
    vertical-align: top;
}

.raci-matrix-table .subtask-cell {
    text-align: left;
}

.raci-matrix-table .raci-cell {
    font-weight: 700;
    font-size: 0.875rem;
}

.raci-matrix-table .raci-r { color: var(--accent-primary); background: rgba(233, 69, 96, 0.1); }
.raci-matrix-table .raci-a { color: var(--accent-warning); background: rgba(255, 217, 61, 0.1); }
.raci-matrix-table .raci-c { color: var(--accent-info); background: rgba(107, 206, 255, 0.1); }
.raci-matrix-table .raci-i { color: var(--text-muted); background: rgba(128, 128, 128, 0.05); }

.raci-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.raci-legend strong {
    color: var(--text-primary);
}

/* ===== WORKFLOW DESIGNER ===== */
.designer-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: calc(100vh - 280px);
    min-height: 500px;
}

.designer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    gap: 1rem;
}

.designer-workflow-info {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.designer-workflow-info input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.designer-workflow-info input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.designer-actions {
    display: flex;
    gap: 0.5rem;
}

.designer-main {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.designer-canvas {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.canvas-tasks {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.canvas-tasks .empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-add-task {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: transparent;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.btn-add-task:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(233, 69, 96, 0.05);
}

/* Task Node in Designer */
.designer-task-node {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.designer-task-node:hover {
    border-color: var(--accent-info);
}

.designer-task-node.selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

.designer-task-node .task-node-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.designer-task-node .task-node-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    color: var(--accent-primary);
}

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

.designer-task-node .task-node-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.designer-task-node:hover .task-node-actions {
    opacity: 1;
}

.designer-task-node .task-node-actions button {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.designer-task-node .task-node-actions button:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.designer-task-node .task-node-actions button.delete:hover {
    color: var(--accent-danger);
}

.designer-task-node .task-node-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.designer-task-node .task-node-badge {
    background: var(--bg-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

/* Task Connection Arrow */
.task-connection {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
    color: var(--text-muted);
}

/* Designer Panel */
.designer-panel {
    width: 380px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.designer-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.designer-panel .panel-header h3 {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0;
}

.designer-panel .panel-close {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
}

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

.designer-panel .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.designer-panel .panel-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Form Groups in Panel */
.designer-panel .form-section {
    margin-bottom: 1.25rem;
}

.designer-panel .form-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.designer-panel .form-group {
    margin-bottom: 0.875rem;
}

.designer-panel .form-group label {
    display: block;
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.designer-panel .form-group input,
.designer-panel .form-group select,
.designer-panel .form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.designer-panel .form-group input:focus,
.designer-panel .form-group select:focus,
.designer-panel .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.designer-panel .form-group textarea {
    resize: vertical;
    min-height: 60px;
}

/* Subtasks List in Panel */
.subtasks-editor {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 0.375rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.subtask-item:last-child {
    margin-bottom: 0;
}

.subtask-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.subtask-item.selected {
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid var(--accent-primary);
}

.subtask-item .subtask-order {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.688rem;
    font-weight: 600;
    flex-shrink: 0;
}

.subtask-item .subtask-name {
    flex: 1;
    font-size: 0.813rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subtask-item .subtask-raci {
    font-size: 0.688rem;
    color: var(--text-muted);
}

.subtask-item .subtask-delete {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.subtask-item:hover .subtask-delete {
    opacity: 1;
}

.subtask-item .subtask-delete:hover {
    color: var(--accent-danger);
}

.btn-add-subtask {
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.813rem;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

.btn-add-subtask:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* RACI Editor in Panel */
.raci-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.raci-editor .raci-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.raci-editor .raci-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.raci-editor .raci-field.raci-r label { color: var(--accent-primary); }
.raci-editor .raci-field.raci-a label { color: var(--accent-warning); }
.raci-editor .raci-field.raci-c label { color: var(--accent-info); }
.raci-editor .raci-field.raci-i label { color: var(--text-muted); }

.raci-editor .raci-field select {
    padding: 0.375rem 0.5rem;
    font-size: 0.813rem;
}

/* Multi-select for Consulted/Informed */
.raci-multi-select {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    min-height: 32px;
}

.raci-multi-select .raci-tag {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.raci-multi-select .raci-tag-remove {
    cursor: pointer;
    color: var(--text-muted);
}

.raci-multi-select .raci-tag-remove:hover {
    color: var(--accent-danger);
}

/* RACI Section Toggle */
.designer-raci-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
}

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

.raci-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.raci-table-container {
    overflow-x: auto;
}

/* Editable RACI Table */
.raci-editor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.813rem;
}

.raci-editor-table th,
.raci-editor-table td {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-color);
    text-align: center;
}

.raci-editor-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.75rem;
}

.raci-editor-table td.task-name {
    text-align: left;
    font-weight: 500;
    background: var(--bg-tertiary);
}

.raci-editor-table td.subtask-name {
    text-align: left;
}

.raci-editor-table td.raci-cell {
    cursor: pointer;
    transition: background 0.2s ease;
    min-width: 40px;
}

.raci-editor-table td.raci-cell:hover {
    background: rgba(255, 255, 255, 0.05);
}

.raci-editor-table td.raci-cell.active-r { background: rgba(233, 69, 96, 0.15); color: var(--accent-primary); font-weight: 700; }
.raci-editor-table td.raci-cell.active-a { background: rgba(255, 217, 61, 0.15); color: var(--accent-warning); font-weight: 700; }
.raci-editor-table td.raci-cell.active-c { background: rgba(107, 206, 255, 0.15); color: var(--accent-info); font-weight: 700; }
.raci-editor-table td.raci-cell.active-i { background: rgba(128, 128, 128, 0.1); color: var(--text-muted); font-weight: 700; }

.raci-editor-table .subtask-name-cell {
    text-align: left;
    font-size: 0.75rem;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.raci-editor-table .role-col {
    font-size: 0.688rem;
    padding: 0.375rem 0.25rem;
    white-space: nowrap;
}

.raci-matrix-wrapper {
    overflow-x: auto;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
}

.raci-legend-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.688rem;
    color: var(--text-muted);
}

.raci-legend-mini strong {
    display: inline-block;
    width: 1rem;
    text-align: center;
    margin-right: 0.125rem;
}

.raci-legend-mini .raci-r { color: var(--accent-primary); }
.raci-legend-mini .raci-a { color: var(--accent-warning); }
.raci-legend-mini .raci-c { color: var(--accent-info); }
.raci-legend-mini .raci-i { color: var(--text-muted); }

/* Checkbox groups for multi-select */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.checkbox-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.checkbox-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.checkbox-item span {
    color: var(--text-secondary);
}

.checkbox-item:has(input:checked) {
    background: rgba(233, 69, 96, 0.15);
}

.checkbox-item:has(input:checked) span {
    color: var(--text-primary);
}

/* RACI field full width for checkbox groups */
.raci-editor .raci-field.full-width {
    grid-column: 1 / -1;
}

/* Approval Editor */
.approval-editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.approval-editor .form-group {
    margin-bottom: 0;
}

.approval-editor .checkbox-item input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent-primary);
}

/* Review Forms for Workflow Tasks */
.opportunity-review-form,
.devis-review-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-section {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.review-section h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.review-table th,
.review-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.review-table th {
    width: 35%;
    color: var(--text-muted);
    font-weight: 500;
}

.review-table td {
    color: var(--text-primary);
}

.review-table td.amount {
    font-weight: 600;
    color: var(--accent-success);
    font-size: 1.1em;
}

.review-table tr:last-child th,
.review-table tr:last-child td {
    border-bottom: none;
}

/* RACI Summary in Review Forms */
.raci-section .raci-summary {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.raci-section .raci-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.raci-section .raci-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.raci-section .raci-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

/* Alert Messages in Review Forms */
.opportunity-review-form .alert,
.devis-review-form .alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.alert-warning {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.alert-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

/* Comment Section */
.comment-section textarea {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 60px;
}

.comment-section textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Form Grid Layout for Review Forms */
.review-section .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.review-section .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.review-section .form-group.span-2 {
    grid-column: span 2;
}

.review-section .form-group label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.review-section .form-value {
    font-size: 0.9375rem;
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    min-height: 38px;
    display: flex;
    align-items: center;
}

.review-section .form-value.amount {
    font-weight: 600;
    color: var(--accent-success);
    font-size: 1rem;
}

.review-section .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.review-section .form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.review-section .form-input::-webkit-inner-spin-button,
.review-section .form-input::-webkit-outer-spin-button {
    opacity: 1;
}

/* Badges for Status Display */
.review-section .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
}

.badge-stage {
    background: rgba(107, 206, 255, 0.15);
    color: var(--accent-info);
    border: 1px solid rgba(107, 206, 255, 0.3);
}

.badge-success {
    background: rgba(78, 204, 163, 0.15);
    color: var(--accent-success);
    border: 1px solid rgba(78, 204, 163, 0.3);
}

.badge-warning {
    background: rgba(255, 217, 61, 0.15);
    color: var(--accent-warning);
    border: 1px solid rgba(255, 217, 61, 0.3);
}

.badge-neutral {
    background: rgba(160, 160, 176, 0.15);
    color: var(--text-secondary);
    border: 1px solid rgba(160, 160, 176, 0.3);
}

/* Responsive adjustment for smaller screens */
@media (max-width: 500px) {
    .review-section .form-grid {
        grid-template-columns: 1fr;
    }
    .review-section .form-group.span-2 {
        grid-column: span 1;
    }
}

/* Products Table in Devis Review */
.devis-review-form .products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.devis-review-form .products-table th {
    background: var(--bg-secondary);
    padding: 0.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.devis-review-form .products-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.devis-review-form .products-table tfoot td {
    border-top: 2px solid var(--border-color);
    border-bottom: none;
    background: var(--bg-secondary);
}

/* Client Confirmation Form */
.client-confirmation-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.client-confirmation-form .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.client-confirmation-form .file-upload-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.client-confirmation-form .file-input {
    padding: 0.5rem;
    background: var(--bg-input);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.client-confirmation-form .file-input:hover {
    border-color: var(--accent-info);
}

.client-confirmation-form .file-input::file-selector-button {
    background: var(--accent-info);
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8125rem;
    margin-right: 0.75rem;
}

.client-confirmation-form .file-upload-info {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.client-confirmation-form .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.client-confirmation-form .checkbox-label:hover {
    border-color: var(--accent-info);
}

.client-confirmation-form .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-success);
    cursor: pointer;
}

.client-confirmation-form .checkbox-label span {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.client-confirmation-form label.required::after {
    content: " *";
    color: var(--accent-primary);
}

/* Delivery Address Display */
.delivery-address-display {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.delivery-address-display .address-name {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.delivery-address-display .address-line {
    color: var(--text-secondary);
    line-height: 1.5;
}

.delivery-address-display .address-contact {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Quote Lines Table */
.quote-lines-section {
    margin-top: 1rem;
}

.quote-lines-table-container {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.quote-lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.quote-lines-table th,
.quote-lines-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.quote-lines-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.quote-lines-table tbody tr:hover {
    background: var(--bg-hover);
}

.quote-lines-table .text-right {
    text-align: right;
}

.quote-lines-table .code {
    font-family: monospace;
    color: var(--accent-info);
    font-size: 0.8rem;
}

.quote-lines-table tfoot tr {
    border-top: 2px solid var(--border-color);
}

.quote-lines-table tfoot .total-row td {
    padding-top: 0.75rem;
    font-weight: 600;
}

.quote-lines-table tfoot .grand-total-row td {
    font-size: 1rem;
    color: var(--accent-success);
    padding-bottom: 0.75rem;
}

.quote-lines-table tfoot .ecotax-row td,
.quote-lines-table tfoot .tax-row td {
    color: var(--text-muted);
    font-size: 0.813rem;
}

/* Ecotax row in tbody (first line of quote) */
.quote-lines-table tbody .ecotax-row {
    background: rgba(var(--accent-info-rgb, 59, 130, 246), 0.08);
    border-bottom: 1px solid var(--border-color);
}

.quote-lines-table tbody .ecotax-row td {
    color: var(--text-secondary);
    font-style: italic;
}

/* Delivery fees row styling */
.quote-lines-table tbody .delivery-fees-row {
    background: rgba(var(--accent-warning-rgb, 245, 158, 11), 0.08);
    border-top: 1px solid var(--border-color);
}

.quote-lines-table tbody .delivery-fees-row td {
    color: var(--text-secondary);
}

/* Product Search Results - Variant Support */
.product-result {
    cursor: pointer;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.product-result:hover {
    background: var(--bg-hover);
}

.product-result.has-variants {
    border-left: 3px solid var(--accent-info);
}

.product-result .product-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.product-result .variant-badge {
    font-size: 0.7rem;
    background: var(--accent-info);
    color: white;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.5rem;
}

.product-result .product-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
}

.product-result .product-price {
    font-weight: 600;
    color: var(--accent-success);
}

.product-result .select-hint {
    font-size: 0.75rem;
    color: var(--accent-info);
    font-style: italic;
}

/* Variant Configurator */
.variant-configurator {
    display: none;
    background: var(--bg-secondary);
    border: 2px solid var(--accent-info);
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.variant-configurator.active {
    display: block;
}

.variant-configurator .configurator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--accent-info);
    color: white;
}

.variant-configurator .configurator-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.variant-configurator .configurator-header .btn-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.variant-configurator .configurator-body {
    padding: 1rem;
}

.variant-configurator .product-base-info {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.variant-configurator .product-base-info .product-code {
    font-family: monospace;
    font-weight: 600;
    color: var(--accent-info);
}

.variant-configurator .product-base-info .product-category {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.variant-configurator .attribute-selector {
    margin-bottom: 1rem;
}

.variant-configurator .attribute-selector label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.variant-configurator .attribute-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.variant-configurator .attr-value-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.875rem;
}

.variant-configurator .attr-value-btn:hover {
    border-color: var(--accent-info);
    background: var(--bg-hover);
}

.variant-configurator .attr-value-btn.selected {
    border-color: var(--accent-info);
    background: var(--accent-info);
    color: white;
}

.variant-configurator .selected-variant-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-top: 1rem;
}

.variant-configurator .selected-variant-info .variant-code {
    font-family: monospace;
    font-weight: 600;
    color: var(--text-primary);
}

.variant-configurator .selected-variant-info .variant-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent-success);
}

.variant-configurator .selected-variant-info .variant-warning {
    color: var(--accent-warning);
    font-size: 0.813rem;
}

.variant-configurator .configurator-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

/* Loading Quote Details */
.loading-quote-details {
    padding: 1rem;
    text-align: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.loading-quote-details .text-muted {
    color: var(--text-muted);
    font-size: 0.813rem;
    margin-left: 0.5rem;
}

/* Validation Warning Section */
.validation-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.validation-warning h4 {
    color: var(--accent-warning);
    margin-bottom: 0.5rem;
}

.validation-warning p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Icon Selector */
.icon-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.icon-selector .icon-option {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.icon-selector .icon-option:hover {
    border-color: var(--accent-info);
    color: var(--accent-info);
}

.icon-selector .icon-option.selected {
    border-color: var(--accent-primary);
    background: rgba(233, 69, 96, 0.1);
    color: var(--accent-primary);
}

/* Workflow Definitions Grid Update */
.workflow-definitions-header {
    margin-bottom: 1rem;
}

.workflow-definition-card {
    position: relative;
}

.workflow-definition-card .definition-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.workflow-definition-card .btn-edit,
.workflow-definition-card .btn-delete {
    flex: 1;
    padding: 0.5rem;
    font-size: 0.813rem;
}

/* ===== JointJS WORKFLOW DESIGNER v2 ===== */
.designer-layout-v2 {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 280px);
    min-height: 500px;
    gap: 0;
}

.designer-toolbar-center {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.btn-tool {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.813rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tool:hover {
    background: var(--bg-hover);
    border-color: var(--accent-info);
    color: var(--text-primary);
}

.btn-tool:active {
    transform: scale(0.97);
}

.btn-tool svg {
    flex-shrink: 0;
}

.designer-main-v2 {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
    margin-top: 1rem;
}

.jointjs-canvas-container {
    flex: 1;
    min-height: 400px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    overflow: auto;
    position: relative;
    border: 1px solid var(--border-color);
    border-right: none;
}

#jointjsPaper {
    width: 2000px;
    height: 3000px;
    background:
        linear-gradient(to right, var(--border-light) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border-light) 1px, transparent 1px);
    background-size: 20px 20px;
    cursor: grab;
}

#jointjsPaper:active {
    cursor: grabbing;
}

/* JointJS element overrides for dark theme */
.joint-paper .joint-element .body {
    fill: var(--bg-tertiary);
    stroke: var(--border-color);
    stroke-width: 2;
}

.joint-paper .joint-element.selected .body {
    stroke: var(--accent-primary);
    stroke-width: 3;
}

.joint-paper .joint-element:hover .body {
    stroke: var(--accent-info);
}

.joint-paper .joint-element .label {
    fill: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.joint-paper .joint-element .sublabel {
    fill: var(--text-muted);
    font-size: 11px;
}

/* Decision diamond shape */
.joint-paper .joint-element.decision .body {
    fill: var(--bg-hover);
    stroke: var(--accent-warning);
}

/* Link/Connection styles */
.joint-paper .joint-link .connection {
    stroke: var(--text-muted);
    stroke-width: 2;
}

.joint-paper .joint-link .connection-wrap {
    stroke: transparent;
    stroke-width: 15;
}

.joint-paper .joint-link .marker-target {
    fill: var(--text-muted);
}

.joint-paper .joint-link:hover .connection {
    stroke: var(--accent-info);
}

.joint-paper .joint-link:hover .marker-target {
    fill: var(--accent-info);
}

/* Selected link */
.joint-paper .joint-link.selected .connection {
    stroke: var(--accent-primary);
}

.joint-paper .joint-link.selected .marker-target {
    fill: var(--accent-primary);
}

/* Link tools */
.joint-paper .joint-link .tool-remove circle {
    fill: var(--accent-danger);
}

.joint-paper .joint-link .link-tools .tool-options circle {
    fill: var(--accent-info);
}

/* Ports for connections */
.joint-paper .joint-port-body {
    fill: var(--bg-tertiary);
    stroke: var(--accent-primary);
    stroke-width: 2;
}

.joint-paper .joint-port-body:hover {
    fill: var(--accent-primary);
}

/* Empty canvas message */
.jointjs-canvas-container .empty-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-muted);
    pointer-events: none;
}

.jointjs-canvas-container .empty-canvas svg {
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.jointjs-canvas-container .empty-canvas p {
    margin: 0.25rem 0;
}

/* Zoom indicator */
.zoom-indicator {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Mini-map (optional feature) */
.jointjs-minimap {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 150px;
    height: 100px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    opacity: 0.9;
}

/* ===== AUDIT SUB-TAB ===== */
#subtab-access-audit h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#subtab-access-audit h3::before {
    content: "\1F4CB";
}

#accessAuditTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 1rem;
}

#accessAuditTable thead th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

#accessAuditTable tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.813rem;
    border-bottom: 1px solid var(--border-color);
}

#accessAuditTable tbody tr:last-child td {
    border-bottom: none;
}

#accessAuditTable .audit-type {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

#accessAuditTable .audit-type.login { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
#accessAuditTable .audit-type.access { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
#accessAuditTable .audit-type.denied { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
#accessAuditTable .audit-type.change { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

#accessAuditTable .audit-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

#accessAuditTable .audit-status.success { color: #22c55e; }
#accessAuditTable .audit-status.success::before { content: "\2713"; }
#accessAuditTable .audit-status.failed { color: #ef4444; }
#accessAuditTable .audit-status.failed::before { content: "\2717"; }

/* Directory Access Section */
#tab-access {
    overflow-y: auto !important;
}

#subtab-access-users {
    max-height: calc(100vh - 220px);
    overflow-y: auto !important;
    padding-right: 0.5rem;
}

#subtab-access-users::-webkit-scrollbar {
    width: 6px;
}

#subtab-access-users::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

#subtab-access-users::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

#subtab-access-directories {
    max-height: calc(100vh - 220px);
    overflow-y: auto !important;
    padding-right: 0.5rem;
}

#subtab-access-directories::-webkit-scrollbar {
    width: 6px;
}

#subtab-access-directories::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

#subtab-access-directories::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.directories-sources {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 1rem;
}

.directories-sources h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

#dirAccessCheckboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

#dirAccessCheckboxes::-webkit-scrollbar {
    width: 6px;
}

#dirAccessCheckboxes::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

#dirAccessCheckboxes::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

#dirAccessCheckboxes::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.checkbox-item:hover {
    background: var(--bg-tertiary);
}

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

.checkbox-label {
    font-weight: 500;
    color: var(--text-primary);
}

.checkbox-id {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Directory Access Summary Table */
#dirAccessSummaryTable {
    width: 100%;
    border-collapse: collapse;
}

#dirAccessSummaryTable thead {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.accordion-content {
    max-height: 400px;
    overflow-y: auto;
}

.accordion-content::-webkit-scrollbar {
    width: 6px;
}

.accordion-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.accordion-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.accordion-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.sources-cell {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Danger button */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

/* ============================================
   Storage Management
   ============================================ */
.storage-container {
    padding: 1.5rem;
}

.storage-container h2 {
    margin: 0 0 0.5rem 0;
}

.storage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.storage-tenant-select {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.storage-tenant-select label {
    font-weight: 500;
    color: var(--text-secondary);
}

.storage-tenant-select select {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.storage-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.storage-sources {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    overflow-x: auto;
}

.storage-sources .data-table .path-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.storage-sources .data-table code {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.storage-sources .data-table code.small {
    font-size: 0.6875rem;
}

.storage-sources .data-table .actions {
    white-space: nowrap;
}

.storage-sources .btn-icon {
    padding: 0.375rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.storage-sources .btn-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.storage-sources .btn-icon.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
}

/* Toggle Switch */
.toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-tertiary);
    border-radius: 20px;
    transition: 0.2s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
}

.toggle input:checked + .toggle-slider {
    background: var(--color-primary);
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

/* Badge Types */
.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 4px;
}

.badge-info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.badge-primary {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.badge-secondary {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

/* Responsive */
@media (max-width: 1024px) {
    .access-layout {
        grid-template-columns: 1fr;
    }

    .access-sidebar {
        position: static;
    }
}

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

    .checkbox-group {
        grid-template-columns: 1fr;
    }

    #tab-access .sub-tabs {
        flex-wrap: wrap;
    }

    #tab-access .sub-tab {
        flex: 1 1 45%;
    }
}

/* ============================================
   Monitoring Dashboard Enhanced
   ============================================ */

/* Stats Row */
.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stats-row .stat-card {
    flex: 1;
    min-width: 120px;
}

/* Charts Row */
.charts-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.charts-row .chart-container {
    min-height: 280px;
}

/* Table Header with Export */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.table-header h4 {
    margin: 0;
    color: var(--text-secondary);
}

.export-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.export-controls select {
    padding: 0.4rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.813rem;
}

/* Handler Tags */
.tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.handler-rag { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
.handler-crm { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.handler-chat { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.handler-document_analysis { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
.handler-document_search { background: rgba(14, 165, 233, 0.2); color: #38bdf8; }
.handler-visualization { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
.handler-catalog { background: rgba(234, 179, 8, 0.2); color: #facc15; }
.handler-fallback { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }

/* Star Ratings */
.star-positive { color: var(--accent-success); }
.star-negative { color: var(--accent-primary); }
.star-neutral { color: var(--accent-warning); }

/* Status Values */
.stat-value.positive { color: var(--accent-success); }
.stat-value.negative { color: var(--accent-primary); }

/* Status Badges */
.status-ok {
    background: rgba(78, 204, 163, 0.2);
    color: var(--accent-success);
}

.status-error {
    background: rgba(233, 69, 96, 0.2);
    color: var(--accent-primary);
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.service-card {
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--text-muted);
}

.service-card.running {
    border-left-color: var(--accent-success);
}

.service-card.stopped {
    border-left-color: var(--accent-primary);
}

.service-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

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

.service-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Logs Container */
.logs-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
}

.log-line {
    padding: 0.125rem 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.log-line.error { color: var(--accent-primary); }
.log-line.warning { color: var(--accent-warning); }
.log-line.info { color: var(--accent-info); }
.log-line.debug { color: var(--text-muted); }

/* Info Message */
.info-message {
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--text-secondary);
}

.info-message p {
    margin: 0.5rem 0;
}

/* Handlers List */
.handlers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Toggle Label */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.toggle-label input[type="checkbox"] {
    accent-color: var(--accent-primary);
}

/* Admin Page */
.admin-page {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(100vh - 100px);
}

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

.admin-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.admin-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Small Button */
.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.btn-small:hover {
    background: var(--bg-hover);
}

/* Responsive Charts */
@media (max-width: 900px) {
    .charts-row {
        flex-direction: column;
    }

    .charts-row .chart-container {
        flex: none !important;
    }
}

/* ============================================
   Workflow Module Styles
   ============================================ */

/* Workflow Tab Layout (unified pill style) */
#tab-workflow .sub-tabs {
    display: flex;
    gap: 0.375rem;
    padding: 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    width: fit-content;
}

#tab-workflow .sub-tab {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

#tab-workflow .sub-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

#tab-workflow .sub-tab.active {
    background: var(--accent-primary);
    color: white;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

#tab-workflow .sub-content {
    display: none;
}

#tab-workflow .sub-content.active {
    display: block;
}

/* Workflow Task Card */
.workflow-task-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.2s ease;
}

.workflow-task-card:hover {
    box-shadow: var(--shadow-md);
}

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

.workflow-task-card .task-project {
    font-weight: 600;
    color: var(--text-primary);
}

.workflow-task-card .task-role {
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.workflow-task-card .task-role.role-R { background: var(--accent-primary); color: white; }
.workflow-task-card .task-role.role-A { background: var(--accent-warning); color: #1a1a2e; }
.workflow-task-card .task-role.role-C { background: var(--accent-info); color: #1a1a2e; }
.workflow-task-card .task-role.role-I { background: var(--text-muted); color: white; }

.workflow-task-card .task-name {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.workflow-task-card .task-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.workflow-task-card .task-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.workflow-task-card .task-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.task-action-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Workflow Instance Card */
.workflow-instance-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: box-shadow 0.2s ease;
}

.workflow-instance-card:hover {
    box-shadow: var(--shadow-md);
}

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

.workflow-instance-card .instance-name {
    font-weight: 600;
    color: var(--text-primary);
}

.workflow-instance-card .instance-status {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.workflow-instance-card .instance-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.workflow-instance-card .progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-primary);
    border-radius: 3px;
    overflow: hidden;
}

.workflow-instance-card .progress-fill {
    height: 100%;
    background: var(--accent-success);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.workflow-instance-card .progress-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: right;
}

.workflow-instance-card .instance-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.workflow-instance-card .instance-actions {
    text-align: right;
}

/* Workflow Definition Card */
.workflow-definition-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
}

.workflow-definition-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.workflow-definition-card .definition-icon {
    color: var(--accent-primary);
    margin-bottom: 0.75rem;
}

.workflow-definition-card .definition-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.workflow-definition-card .definition-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    min-height: 2.5em;
}

.workflow-definition-card .definition-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.workflow-definition-card .badge-active {
    color: var(--accent-success);
}

.workflow-definition-card .badge-inactive {
    color: var(--text-muted);
}

/* Workflow Archive Item */
.workflow-archive-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.workflow-archive-item .archive-name {
    font-weight: 500;
    color: var(--text-primary);
}

.workflow-archive-item .archive-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ========== Workflow Audit Sub-tab ========== */

.audit-kpi-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.audit-kpi {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.25rem;
    min-width: 110px;
    text-align: center;
    flex: 1;
}

.audit-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.audit-kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

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

.audit-select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    min-width: 280px;
    font-size: 0.85rem;
}

.audit-integrity-badge { font-size: 0.85rem; }

.audit-integrity.valid { color: #22c55e; font-weight: 600; }
.audit-integrity.invalid { color: #ef4444; font-weight: 600; }

/* Timeline */
.audit-timeline {
    max-height: 520px;
    overflow-y: auto;
    padding-left: 1.5rem;
    border-left: 2px solid var(--border-color);
}

.audit-tl-entry {
    position: relative;
    padding: 0.5rem 0 0.75rem 1.25rem;
}

.audit-tl-dot {
    position: absolute;
    left: -1.85rem;
    top: 0.7rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.audit-tl-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.audit-tl-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
}

.audit-tl-actor {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.audit-tl-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: auto;
}

.audit-tl-desc {
    font-size: 0.82rem;
    color: var(--text-primary);
}

.audit-tl-comment {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.15rem;
}

/* Workflow Grids */
#workflowInstancesGrid,
#workflowDefinitionsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Workflow Stats */
.workflow-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.workflow-stat-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    min-width: 120px;
    text-align: center;
}

.workflow-stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

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

/* Modal Large (for instance details) */
.modal-content.modal-large {
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
}

/* Instance Info Grid */
.instance-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.instance-info-grid .info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.instance-info-grid .info-item.full-width {
    grid-column: span 2;
}

.instance-info-grid .info-item label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.instance-info-grid .info-item span {
    color: var(--text-primary);
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar-container .progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-container .progress-fill {
    height: 100%;
    background: var(--accent-success);
    border-radius: 4px;
}

/* Task Section in Details Modal */
.task-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.task-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.task-section-header .task-icon {
    font-size: 1.25rem;
}

.task-section-header .task-section-name {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
}

.task-section-header .task-progress {
    font-size: 0.8rem;
    color: var(--accent-success);
    font-weight: 500;
}

.subtasks-list {
    padding: 0.5rem;
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.25rem;
    background: var(--bg-secondary);
}

.subtask-item:last-child {
    margin-bottom: 0;
}

.subtask-item .subtask-order {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.subtask-item .subtask-name {
    flex: 1;
    color: var(--text-primary);
}

.subtask-item .subtask-status {
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
}

.subtask-item .subtask-assignee {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.status-pending, .status-ready { background: var(--bg-hover); color: var(--text-secondary); }
.status-in_progress { background: var(--accent-info); color: #1a1a2e; }
.status-review { background: var(--accent-warning); color: #1a1a2e; }
.status-approval { background: #9b59b6; color: white; }
.status-completed { background: var(--accent-success); color: #1a1a2e; }
.status-rejected { background: var(--accent-primary); color: white; }
.status-skipped { background: var(--text-muted); color: white; }
.status-active { background: var(--accent-success); color: #1a1a2e; }
.status-archived { background: var(--text-muted); color: white; }

/* Tags */
.tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

/* Form Controls for Workflow */
.role-assignment-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.role-assignment-row .role-label {
    min-width: 100px;
    font-weight: 500;
    color: var(--text-secondary);
}

.role-assignment-row .role-email {
    flex: 1;
}

/* Empty State in Workflow */
#tab-workflow .empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

#tab-workflow .empty-state svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

#tab-workflow .empty-state p {
    margin-bottom: 0.25rem;
}

#tab-workflow .empty-state .text-muted {
    font-size: 0.85rem;
}

/* Workflow Toolbar */
.workflow-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.workflow-toolbar .toolbar-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.workflow-toolbar input[type="search"],
.workflow-toolbar select {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.workflow-toolbar input[type="search"]:focus,
.workflow-toolbar select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* ============================================
   SYNC MONITORING CARDS
   ============================================ */

.sync-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.sync-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    transition: border-color 0.2s ease;
}

.sync-card:hover {
    border-color: var(--accent-primary);
}

.sync-card.status-ok {
    border-left: 3px solid var(--success);
}

.sync-card.status-error {
    border-left: 3px solid var(--error);
}

.sync-card.status-stale,
.sync-card.status-stopped {
    border-left: 3px solid var(--warning);
}

.sync-card.status-unknown {
    border-left: 3px solid var(--text-muted);
}

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

.sync-icon {
    font-size: 1.5rem;
}

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

.sync-status {
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.sync-status.status-ok {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.sync-status.status-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.sync-status.status-stale,
.sync-status.status-stopped {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.sync-status.status-unknown,
.sync-status.status-idle {
    background: rgba(156, 163, 175, 0.15);
    color: var(--text-muted);
}

.sync-details {
    margin-bottom: 1rem;
}

.sync-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.875rem;
}

.sync-row .label {
    color: var(--text-muted);
}

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

.sync-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.sync-actions .btn-small {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.sync-actions .btn-primary:hover {
    background: var(--accent-hover);
}

.sync-actions .btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.sync-actions .btn-secondary:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Logs Modal */
.logs-pre {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
}

.modal-large {
    max-width: 800px;
    width: 90%;
}

/* Modal Large Size */
.modal-lg .modal-content,
.modal-content.modal-lg {
    max-width: 950px;
    width: 98%;
}

/* ============================================
   Task Execution Modal
   ============================================ */

.task-info-banner {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.task-info-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.task-info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.task-info-value {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-primary);
}

.task-description {
    background: var(--bg-input);
    border-left: 3px solid var(--accent-info);
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.task-description h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Task Form Fields */
.task-form-section {
    margin-bottom: 1.5rem;
}

.task-form-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group label {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group label.required::after {
    content: ' *';
    color: var(--accent-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.15);
}

.form-group input:disabled,
.form-group select:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Products Table in Task Form */
.products-table-container {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.813rem;
}

.products-table th,
.products-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.products-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.products-table tr:last-child td {
    border-bottom: none;
}

.products-table tr:hover td {
    background: var(--bg-hover);
}

.products-table input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.813rem;
}

.products-table .qty-input {
    width: 70px;
    text-align: center;
}

.products-table .price-input {
    width: 90px;
    text-align: right;
}

.products-table .total-cell {
    font-weight: 600;
    color: var(--accent-success);
    text-align: right;
}

/* Task Modal Actions */
.task-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

/* Task Instructions */
.task-instructions {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-info);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.813rem;
    color: var(--text-secondary);
}

/* Dual Column Table for Quote vs PO Comparison */
.dual-column-table {
    overflow-x: auto;
}

.margin-table {
    font-size: 0.75rem;
}

.margin-table .header-section {
    text-align: center;
    padding: 0.75rem;
    font-size: 0.813rem;
}

.margin-table .header-quote {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-bottom: 2px solid var(--accent-info);
}

.margin-table .header-po {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-bottom: 2px solid var(--accent-success);
}

.margin-table .header-separator,
.margin-table .col-separator {
    width: 3px;
    background: var(--border-color);
    padding: 0;
}

.margin-table th {
    font-size: 0.688rem;
    padding: 0.5rem 0.375rem;
}

.margin-table td {
    padding: 0.5rem 0.375rem;
    vertical-align: middle;
}

.margin-table .col-code {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.margin-table .col-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.margin-table .col-qty {
    text-align: center;
    width: 40px;
}

.margin-table .col-sale,
.margin-table .col-sale-total,
.margin-table .col-cost,
.margin-table .col-cost-total {
    text-align: right;
    white-space: nowrap;
}

.margin-table .col-margin {
    text-align: center;
    font-weight: 600;
    min-width: 70px;
}

.margin-table .col-margin .margin-value {
    display: block;
}

.margin-table .col-margin .margin-icon {
    font-size: 0.875rem;
}

/* Margin Status Colors */
.margin-good {
    color: var(--accent-success);
    background: rgba(78, 204, 163, 0.1);
}

.margin-warning {
    color: var(--accent-warning);
    background: rgba(255, 217, 61, 0.15);
}

.margin-danger {
    color: var(--accent-primary);
    background: rgba(233, 69, 96, 0.15);
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0%, 100% { background: rgba(233, 69, 96, 0.15); }
    50% { background: rgba(233, 69, 96, 0.25); }
}

.margin-table .totals-row td {
    border-top: 2px solid var(--border-color);
    padding-top: 0.75rem;
    font-weight: 600;
}

/* Margin Legend */
.margin-legend {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    padding: 0.75rem;
    margin-top: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

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

/* Price input in margin table */
.margin-table .price-input {
    width: 70px;
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
    text-align: right;
}

/* Loading Overlay for Task Form */
.task-form-loading {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 26, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    border-radius: var(--radius-lg);
}

.task-form-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   Orders Task Forms - Professional Styling
   ============================================ */

/* Devis Review Form */
.devis-review-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.devis-review-form .alert {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
}

.devis-review-form .alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.devis-review-form .alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.devis-review-form .alert-warning {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

/* Review Sections */
.review-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.review-section h4 {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-section h4::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 2px;
}

/* RACI Section */
.raci-section {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
}

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

.raci-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.raci-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.raci-value {
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Comment Section */
.comment-section textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.comment-section textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.15);
}

/* Task Modal Improvements */
#task-modal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

#task-modal .modal-header {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-bottom: 2px solid var(--accent-primary);
    position: sticky;
    top: 0;
    z-index: 10;
}

#task-modal .modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Task Info Banner Improvements */
.task-info-banner {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.task-info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Task Modal Actions Improvements */
.task-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 0 0 0;
    margin-top: 1.5rem;
    border-top: 2px solid var(--border-color);
    flex-wrap: wrap;
}

.task-modal-actions .btn {
    min-width: 120px;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s;
}

.task-modal-actions .btn:hover {
    transform: translateY(-1px);
}

.task-modal-actions .btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #16a34a;
}

.task-modal-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #dc2626;
}

/* Client Confirmation Form */
.client-confirmation-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    background: var(--bg-tertiary);
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--accent-primary);
    background: rgba(233, 69, 96, 0.05);
}

.upload-zone .upload-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

.upload-zone .upload-text {
    font-size: 0.938rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.upload-zone .upload-hint {
    font-size: 0.813rem;
    color: var(--text-muted);
}

/* Uploaded Files List */
.uploaded-files {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.uploaded-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}

.uploaded-file .file-icon {
    font-size: 1.25rem;
    color: var(--accent-info);
}

.uploaded-file .file-name {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploaded-file .file-size {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.uploaded-file .file-remove {
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
}

.uploaded-file .file-remove:hover {
    color: var(--accent-primary);
}

/* ============================================
   RApOff Module - Professional Styling
   ============================================ */

/* Container */
.rapoff-container {
    padding: 1.5rem;
}

.rapoff-container h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Project Selection Bar */
.ao-project-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.project-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.project-selector label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.project-selector select {
    min-width: 280px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.project-selector select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.813rem;
}

.project-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-current .label {
    color: var(--text-muted);
    font-size: 0.813rem;
}

.project-current .project-name {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 0.875rem;
}

/* Upload Section */
.ao-upload-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2rem;
}

.ao-upload-section h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Upload Area (Drag & Drop Zone) */
.ao-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-primary);
    margin: 1.5rem 0;
}

.ao-upload-area:hover {
    border-color: var(--accent-primary);
    background: rgba(233, 69, 96, 0.03);
}

.ao-upload-area.drag-over {
    border-color: var(--accent-primary);
    background: rgba(233, 69, 96, 0.08);
    transform: scale(1.01);
}

.ao-upload-area .upload-icon {
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.ao-upload-area .upload-icon svg {
    opacity: 0.6;
}

.ao-upload-area:hover .upload-icon svg {
    opacity: 1;
    color: var(--accent-primary);
}

.ao-upload-area p {
    margin: 0.5rem 0;
    color: var(--text-secondary);
}

.ao-upload-area p.text-muted {
    font-size: 0.813rem;
    color: var(--text-muted);
}

/* File List */
.ao-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    max-height: 200px;
    overflow-y: auto;
}

.ao-file-list:empty {
    display: none;
}

.ao-file-list .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.ao-file-list .file-name {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.ao-file-list .file-size {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Upload Actions */
.ao-upload-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.ao-upload-actions button {
    flex: 1;
    max-width: 200px;
}

.ao-upload-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Project Info */
.ao-project-info {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    margin-top: 1.5rem;
    border-left: 3px solid var(--accent-primary);
}

.ao-project-info .info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
}

.ao-project-info .info-row:last-child {
    border-bottom: none;
}

.ao-project-info .info-row strong {
    color: var(--text-secondary);
}

/* Status Message */
.status-message {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-top: 1rem;
    display: none;
}

.status-message:not(:empty) {
    display: block;
}

.status-message.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-message.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Badge */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-success);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

.badge-default {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* Diagnostic Section */
.ao-diagnostic-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2rem;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.ao-diagnostic-section h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Improved Analysis Cards Grid */
.ao-analysis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .ao-analysis {
        grid-template-columns: 1fr;
    }
}

.analysis-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    transition: box-shadow 0.2s ease;
}

.analysis-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.analysis-card h4 {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analysis-card h4 svg {
    flex-shrink: 0;
}

.analysis-card.analysis-summary {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
    border-color: var(--accent-primary);
}

.analysis-card.analysis-warning {
    border-left: 3px solid var(--accent-warning);
}

.analysis-card.analysis-warning h4 {
    color: var(--accent-warning);
}

.analysis-content {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.analysis-content ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.analysis-content li {
    margin-bottom: 0.25rem;
}

/* GO/NO-GO Score Display */
.go-nogo-score {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border: 2px solid var(--border-primary);
}

.go-nogo-score.go {
    border-color: var(--accent-success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, var(--bg-secondary) 100%);
}

.go-nogo-score.nogo {
    border-color: var(--accent-danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-secondary) 100%);
}

.go-nogo-score .score-badge {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 80px;
    text-align: center;
}

.go-nogo-score.go .score-badge {
    color: var(--accent-success);
}

.go-nogo-score.nogo .score-badge {
    color: var(--accent-danger);
}

.go-nogo-score .score-reco {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.score-details {
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.score-details ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1rem;
}

.score-details li {
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
}

.go-nogo-justification {
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-style: italic;
}

.alerts-section {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border-radius: 6px;
    border-left: 3px solid var(--border-primary);
}

.alerts-section.danger {
    border-color: var(--accent-danger);
    background: rgba(239, 68, 68, 0.1);
}

.alerts-section.warning {
    border-color: var(--accent-warning);
    background: rgba(245, 158, 11, 0.1);
}

.alerts-section.success {
    border-color: var(--accent-success);
    background: rgba(16, 185, 129, 0.1);
}

.planning-client,
.logistics-constraints,
.phases-by-zone {
    margin: 0.75rem 0;
}

.logistics-constraints ul,
.phases-by-zone ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

/* Logistics Section - Dedicated Card */
.analysis-logistics {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%);
}

.analysis-logistics h4 {
    color: #3b82f6;
}

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

.logistics-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.logistics-item.highlight {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.logistics-item.warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}

.logistics-warnings {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
}

.logistics-warnings ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
}

.logistics-warnings li {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.logistics-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.logistics-content {
    flex: 1;
}

.logistics-content strong {
    display: block;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.logistics-content p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Diagnostic Summary */
.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.summary-header strong {
    font-size: 1.125rem;
    color: var(--text-primary);
}

.recommendation {
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.recommendation.go {
    background: rgba(78, 204, 163, 0.2);
    color: var(--accent-success);
}

.recommendation.nogo {
    background: rgba(233, 69, 96, 0.2);
    color: var(--accent-primary);
}

.points-section {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.points-section.warning {
    border-left: 3px solid var(--accent-warning);
}

.points-section.success {
    border-left: 3px solid var(--accent-success, #28a745);
    background: rgba(40, 167, 69, 0.1);
}

.meta-info {
    margin-top: 1rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-align: right;
}

/* Dates Table */
.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.813rem;
}

.mini-table th, .mini-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.mini-table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.mini-table tr.high-priority {
    background: rgba(233, 69, 96, 0.1);
}

/* Phases List */
.phases-list {
    margin-top: 0.75rem;
}

.phase-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
}

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

.phase-num {
    width: 24px;
    height: 24px;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.phase-content strong {
    color: var(--text-primary);
}

.phase-duration {
    font-size: 0.75rem;
    color: var(--accent-info);
    margin-left: 0.5rem;
}

/* Risk Sections */
.risk-section {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.risk-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.risk-section.alert {
    background: rgba(233, 69, 96, 0.1);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-primary);
}

/* Spinner Animation */
.btn-spinner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.spinner-icon {
    animation: spin 1s linear infinite;
}

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

#aoDiagnoseBtn {
    min-width: 200px;
    position: relative;
}

#aoDiagnoseBtn:disabled {
    opacity: 0.7;
    cursor: wait;
}

#aoDiagnoseStatus {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

#aoDiagnoseStatus.error {
    color: var(--accent-primary);
}

/* Diagnostic Summary Grid */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.summary-grid p {
    margin: 0.25rem 0;
    font-size: 0.875rem;
}

.reco-box {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin: 0.75rem 0;
    font-size: 0.875rem;
}

.reco-box.go {
    background: rgba(78, 204, 163, 0.15);
    border-left: 3px solid var(--accent-success);
}

.reco-box.nogo {
    background: rgba(233, 69, 96, 0.15);
    border-left: 3px solid var(--accent-primary);
}

/* Planning styles */
.planning-header {
    font-size: 1rem;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.phase-pred {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.info-section {
    margin: 0.75rem 0;
    padding: 0.5rem 0;
}

.info-section ul {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

/* Risk score badge */
.risk-score-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.risk-score-badge.danger {
    background: rgba(233, 69, 96, 0.2);
    color: var(--accent-primary);
}

.risk-score-badge.warning {
    background: rgba(255, 217, 61, 0.2);
    color: var(--accent-warning);
}

.risk-score-badge.success {
    background: rgba(78, 204, 163, 0.2);
    color: var(--accent-success);
}

/* Alerts section */
.alerts-section {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.alerts-section.warning {
    border-left: 3px solid var(--accent-warning);
}

.alerts-section ul {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.constraints {
    margin: 0.75rem 0;
}

.constraints ul {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

/* Project List (for sidebar or modal) */
.project-item {
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.project-item.active {
    border-color: var(--accent-primary);
    border-left: 3px solid var(--accent-primary);
    background: rgba(233, 69, 96, 0.05);
}

.project-item .project-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.project-item .project-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.project-item .project-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    font-size: 0.688rem;
    margin-left: 0.5rem;
    text-transform: uppercase;
}

.project-item .status-ready {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-success);
}

.project-item .status-draft {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.project-item .status-analyzing {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

/* Clickable values in monitoring */
.clickable {
    cursor: pointer;
    color: var(--accent-info);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.clickable:hover {
    color: var(--accent-primary);
    text-decoration-style: solid;
}

/* Patterns table */
#patternsTable {
    width: 100%;
    border-collapse: collapse;
}

#patternsTable th,
#patternsTable td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#patternsTable th {
    background: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.813rem;
    text-transform: uppercase;
    color: var(--text-secondary);
}

#patternsTable td code {
    background: var(--bg-input);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.813rem;
}

#patternsTable tbody tr:hover {
    background: var(--bg-hover);
}

/* ============================================
   RSE Section Styles
   ============================================ */
.rse-section {
    padding: 1rem 0;
}

.rse-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.rse-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.rse-card:hover {
    border-color: var(--accent-success);
    box-shadow: 0 4px 12px rgba(78, 204, 163, 0.15);
}

.rse-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--accent-success);
}

.rse-card h4 svg {
    flex-shrink: 0;
    stroke: var(--accent-success);
}

.rse-data {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.rse-data p {
    margin: 0.5rem 0;
}

.rse-data strong {
    color: var(--text-secondary);
    font-weight: 500;
}

.rse-data ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.rse-data li {
    margin: 0.25rem 0;
}

.rse-data .badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.rse-data .badge-success {
    background: rgba(78, 204, 163, 0.2);
    color: var(--accent-success);
}

.rse-data .badge-warning {
    background: rgba(255, 217, 61, 0.2);
    color: var(--accent-warning);
}

.rse-data .badge-info {
    background: rgba(107, 206, 255, 0.2);
    color: var(--accent-info);
}

.rse-highlight {
    background: rgba(78, 204, 163, 0.1);
    border-left: 3px solid var(--accent-success);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0.5rem 0;
}

.rse-percentage {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-success);
}

/* ============================================
   RapOff Tab Scrolling
   ============================================ */
#tab-rapoff {
    overflow-y: auto !important;
}

#tab-rapoff .sub-content {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding-bottom: 2rem;
}

#tab-rapoff .sub-content.active {
    display: block;
    overflow-y: auto;
}

/* ============================================
   AI Act Article 50 — Disclosure Badge
   ============================================ */
.ai-disclosure-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background: var(--bg-tertiary, #16213e);
    font-size: 0.75rem;
    color: var(--text-secondary, #a0a0b0);
    border: 1px solid var(--border-color, #2a2a4a);
}

.ai-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
}

.ai-badge-label {
    font-weight: 500;
}

.ai-badge-article {
    opacity: 0.6;
    font-size: 0.65rem;
}

.ai-session-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 1rem;
    border-radius: 6px;
    background: var(--bg-tertiary, #16213e);
    border-left: 3px solid var(--accent-info, #6bceff);
    font-size: 0.8rem;
    color: var(--text-secondary, #a0a0b0);
}

.ai-session-notice-icon {
    font-weight: 700;
    color: var(--accent-info, #6bceff);
}

.ai-session-notice-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted, #606080);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.25rem;
}

.ai-session-notice-close:hover {
    color: var(--text-primary, #f0f0f5);
}

/* ============================================
   Help & Onboarding
   ============================================ */
.onboarding-modal {
    max-width: 500px;
    width: 90%;
    border-radius: var(--radius-lg);
}

.onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.onboarding-step-indicator {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: rgba(233, 69, 96, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

.onboarding-body {
    padding: 1.5rem;
}

.onboarding-body h3 {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.onboarding-body p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.onboarding-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

@keyframes onboarding-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(233, 69, 96, 0); }
}

.onboarding-highlight {
    animation: onboarding-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.help-welcome {
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 1.5rem;
}

.help-welcome h3 {
    margin-bottom: 0.75rem;
}

.help-welcome p {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.help-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 0 1rem 1rem;
}

.help-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.help-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.help-card h4 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.help-card p {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.help-feature-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.help-feature-card h4 {
    margin-bottom: 0.5rem;
    color: var(--accent-primary);
}

.help-example {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.875rem;
}

.help-tip {
    background: rgba(78, 204, 163, 0.1);
    border-left: 3px solid var(--accent-success);
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.help-search-results {
    padding: 0 1rem;
}

.help-search-result {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.help-search-result:hover {
    border-color: var(--accent-primary);
}

.help-result-type {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent-info);
    margin-right: 0.5rem;
}

.help-no-results {
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem 0;
}

.faq-category {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--accent-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.25rem;
}

.faq-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.faq-item summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.faq-item summary:hover {
    background: var(--bg-hover);
}

.faq-item p {
    padding: 0 1rem 0.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.help-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.help-shortcuts-table th,
.help-shortcuts-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.help-shortcuts-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.help-shortcuts-table kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    font-family: monospace;
    font-size: 0.85rem;
}

.help-tooltip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 1rem;
    z-index: 10000;
    max-width: 350px;
    box-shadow: var(--shadow-lg);
}

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

.help-tooltip-header button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
}

/* ============================================
   Language Selector (Sprint 8.1)
   ============================================ */
.fox-lang-selector {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.fox-lang-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.5px;
}
.fox-lang-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}
.fox-lang-btn.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* ==================== AGENT DASHBOARD ==================== */
.agent-dashboard-container { padding: 0 8px; }

.agent-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.agent-tool-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 14px;
    background: var(--card-bg, #fff);
}
.agent-tool-card .tool-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.agent-tool-card .tool-desc {
    font-size: 0.85rem;
    color: #666;
    margin: 4px 0;
}
.agent-tool-card .tool-target {
    font-size: 0.78rem;
    color: #999;
}

.agent-kpi-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.agent-run-row { cursor: pointer; }
.agent-run-row:hover { background: var(--hover-bg, #f3f4f6); }
.agent-run-detail td { padding: 0 !important; }
.agent-steps-container { padding: 12px 16px; }

.agent-step {
    border-left: 3px solid #d1d5db;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
.agent-step.step-think  { border-color: #3b82f6; }
.agent-step.step-tool   { border-color: #8b5cf6; }
.agent-step.step-obs    { border-color: #22c55e; }
.agent-step.step-final  { border-color: #f59e0b; }
.agent-step.step-error  { border-color: #ef4444; }
.agent-step.step-plan   { border-color: #06b6d4; }

.step-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f3f4f6;
    margin-right: 8px;
}
.step-duration { font-size: 0.75rem; color: #888; }
.step-thought { margin-top: 4px; white-space: pre-wrap; }
.step-tool-name { color: #8b5cf6; font-weight: 500; margin-top: 2px; }
.step-observation { color: #555; margin-top: 2px; white-space: pre-wrap; font-size: 0.82rem; }
.step-error-msg { color: #ef4444; margin-top: 2px; }

.badge-error { background: #fecaca; color: #b91c1c; }

.agent-tool-chart { margin-top: 12px; }
.tool-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.tool-bar-label { width: 140px; font-size: 0.82rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-bar-track { flex: 1; height: 18px; background: #f3f4f6; border-radius: 4px; overflow: hidden; }
.tool-bar-fill { height: 100%; background: var(--accent-primary, #3b82f6); border-radius: 4px; transition: width 0.3s; }
.tool-bar-count { width: 30px; font-size: 0.82rem; color: #666; }

/* ── Marketplace Catalogue OPERRA ── */
.tm-stat { padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.tm-stat-green { background: rgba(46,204,113,0.1); color: #2ecc71; }
.tm-stat-orange { background: rgba(243,156,18,0.1); color: #f39c12; }
.tm-stat-red { background: rgba(231,76,60,0.1); color: #e74c3c; }
.tm-stat-installed { background: rgba(52,152,219,0.1); color: #3498db; }

.tm-pillar-section { margin-bottom: 24px; }
.tm-pillar-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; margin-bottom: 12px;
    padding: 8px 12px; border-radius: 8px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
}
.tm-pillar-icon { font-size: 20px; }
.tm-pillar-desc { font-size: 11px; font-weight: 400; color: var(--text-secondary, #888); margin-left: auto; }
.tm-pillar-count {
    background: var(--accent-primary, #e67e22); color: #fff;
    padding: 2px 8px; border-radius: 10px; font-size: 11px;
}

.tm-pillar-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}

.tm-module-card {
    padding: 12px; border-radius: 8px;
    background: var(--bg-tertiary, #0d0d1a);
    border: 1px solid var(--border-color, #333);
    transition: border-color 0.2s;
}
.tm-module-card:hover { border-color: var(--accent-primary, #e67e22); }
.tm-status-green { border-left: 3px solid #2ecc71; }
.tm-status-orange { border-left: 3px solid #f39c12; }
.tm-status-red { border-left: 3px solid #e74c3c; }
.tm-status-installed { border-left: 3px solid #3498db; }

.tm-module-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.tm-module-status { font-size: 14px; }
.tm-module-name { font-weight: 600; font-size: 13px; flex: 1; }
.tm-module-plan { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.05); color: #888; }
.tm-module-tagline { font-size: 11px; color: var(--text-secondary, #aaa); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-module-reason { font-size: 10px; color: #888; }
.tm-module-deps { font-size: 10px; color: #f39c12; margin-top: 4px; }
.tm-dep { background: rgba(243,156,18,0.1); padding: 1px 6px; border-radius: 3px; margin-right: 4px; }
.tm-install-btn {
    margin-top: 8px; width: 100%; padding: 6px; border: none; border-radius: 6px;
    background: #2ecc71; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tm-install-btn:hover { background: #27ae60; }

/* ── Onboarding Wizard ── */
.ob-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
}
.ob-modal {
    background: var(--bg-primary, #0d0d1a); border: 1px solid var(--border-color, #333);
    border-radius: 16px; width: 680px; max-width: 95vw; max-height: 90vh;
    display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ob-header {
    padding: 20px 24px 12px; border-bottom: 1px solid var(--border-color, #333);
}
.ob-header h2 { margin: 0 0 12px; font-size: 20px; }
.ob-steps { display: flex; gap: 8px; }
.ob-step {
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: var(--bg-tertiary, #1a1a2e); color: #666;
}
.ob-step.active { background: var(--accent-primary, #e67e22); color: #fff; }
.ob-step.done { background: #2ecc71; color: #fff; }
.ob-body { padding: 24px; overflow-y: auto; flex: 1; }
.ob-footer {
    padding: 16px 24px; border-top: 1px solid var(--border-color, #333);
    display: flex; justify-content: space-between;
}
.ob-btn {
    padding: 8px 24px; border-radius: 8px; font-size: 14px; font-weight: 600;
    border: none; cursor: pointer;
}
.ob-btn-next { background: var(--accent-primary, #e67e22); color: #fff; }
.ob-btn-next:hover { opacity: 0.9; }
.ob-btn-skip { background: transparent; color: #888; }
.ob-btn-skip:hover { color: #fff; }

.ob-welcome { text-align: center; }
.ob-logo { font-size: 32px; font-weight: 800; letter-spacing: 4px; color: var(--accent-primary, #e67e22); margin-bottom: 8px; }
.ob-welcome h3 { font-size: 13px; font-weight: 400; color: #888; margin-bottom: 20px; }
.ob-pillars { display: flex; gap: 12px; margin-top: 20px; }
.ob-pillar {
    flex: 1; padding: 16px; border-radius: 10px; text-align: center;
    background: var(--bg-secondary, #1a1a2e); border: 1px solid var(--border-color, #333);
}
.ob-pillar-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.ob-pillar strong { display: block; font-size: 12px; margin-bottom: 4px; }
.ob-pillar small { font-size: 11px; color: #888; }

.ob-connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 16px 0; }
.ob-connector-card {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    border-radius: 8px; border: 2px solid var(--border-color, #333);
    background: var(--bg-tertiary, #0d0d1a); cursor: pointer; transition: border-color 0.2s;
}
.ob-connector-card:hover { border-color: var(--accent-primary, #e67e22); }
.ob-connector-card.selected { border-color: #2ecc71; background: rgba(46,204,113,0.05); }
.ob-cc-icon { font-size: 24px; }
.ob-cc-info { flex: 1; }
.ob-cc-info strong { display: block; font-size: 13px; }
.ob-cc-info small { font-size: 11px; color: #888; }
.ob-cc-check { display: none; color: #2ecc71; font-size: 18px; font-weight: bold; }
.ob-connector-card.selected .ob-cc-check { display: block; }

.ob-hint { font-size: 12px; color: #666; font-style: italic; }
.ob-loading { text-align: center; color: #888; padding: 40px; }
.ob-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 12px 0; }
.ob-rec-card {
    display: flex; align-items: center; gap: 8px; padding: 10px;
    border-radius: 6px; background: var(--bg-tertiary, #0d0d1a);
    border: 1px solid var(--border-color, #333);
}
.ob-rec-status { font-size: 14px; }
.ob-rec-info strong { display: block; font-size: 12px; }
.ob-rec-info small { font-size: 10px; color: #888; }

/* ---- Onboarding Wizard v2 (functional) ---- */
.ob-progress { height: 3px; background: var(--border-color, #1e2740); border-radius: 3px 3px 0 0; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; }
.ob-progress-bar { height: 100%; background: linear-gradient(90deg, #f5731a, #ff8c42); transition: width 0.5s ease; }
.ob-logo { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -1px; margin-bottom: 4px; }
.ob-pillar { text-align: center; padding: 16px 12px; background: var(--bg-tertiary, #0d0d1a); border: 1px solid var(--border-color, #333); border-radius: 10px; flex: 1; }
.ob-pillar strong { display: block; font-size: 12px; margin-top: 8px; color: #fff; }
.ob-pillar span { font-size: 11px; color: #6b7490; display: block; margin-top: 4px; }
.ob-section h3 { font-size: 16px; margin-bottom: 8px; }
.ob-section p { font-size: 13px; color: #9ca3b8; margin-bottom: 12px; }
.ob-connectors { display: flex; gap: 10px; flex-wrap: wrap; }
.ob-connector-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 18px; background: var(--bg-tertiary, #0d0d1a); border: 1px solid var(--border-color, #333); border-radius: 10px; cursor: pointer; min-width: 110px; transition: all 0.2s; color: inherit; font-size: 12px; }
.ob-connector-btn:hover:not(:disabled) { border-color: #f5731a; }
.ob-connector-btn.ob-selected { border-color: #f5731a; background: rgba(245,115,26,0.08); }
.ob-connector-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ob-connector-btn strong { font-size: 13px; }
.ob-input { display: block; width: 100%; padding: 10px 14px; margin: 6px 0; background: var(--bg-tertiary, #0d0d1a); border: 1px solid var(--border-color, #333); border-radius: 8px; color: inherit; font-size: 13px; }
.ob-input:focus { border-color: #f5731a; outline: none; }
.ob-btn-upload, .ob-btn-connect { padding: 10px 20px; background: #f5731a; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; }
.ob-btn-upload:hover, .ob-btn-connect:hover { background: #ff8c42; }
.ob-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-color, #333); }
.ob-badge.green { border-color: #10b981; color: #10b981; }
.ob-badge.gray { color: #6b7490; }
.ob-module-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-tertiary, #0d0d1a); border: 1px solid var(--border-color, #333); border-radius: 10px; margin-bottom: 8px; }
.ob-module-card.installed { opacity: 0.6; }
.ob-module-check { accent-color: #f5731a; width: 18px; height: 18px; }