/* ========================================
   A Kivitelező — Kommunikációs Panel
   Mobile-first, responsive CSS
   @version 3.4.4

   SECTION INDEX:
     1. Variables & Reset
     2. Login Screen
     3. App Layout (sidebar, header)
     4. Main Content
     5. Messages
     6. Coordinator Actions
     7. Compose Area
     8. Members Panel
     9. Jidoka Panel
    10. Empty / Loading States
    11. (Moved to 25)
    12. Mobile / Hamburger
    13. Stats Panel
    14. Responsive
    15. Theme Toggle
    16. File Attachments
    17. Compose File Upload
    18. Documents Tab
    19. Project Create / Message Actions / Search
    20. Compose Options / Broadcast / Priority / Deadline
    21. Coordinator Tasks
    22. Member Notes
    23. Project Sheet (Fázis 2)
    24. Profile Modal (Fázis 3)
    25. App-like UX (Bottom Nav, Toast v2, Skeleton, Haptic, PTR, Settings)
    26. Pairings (Fázis 5)
    27. Tasks Redesign (Fázis 6)
    28. Browse Users (Member Quick-Add)
    29. Project Action Buttons (Delete, Duplicate)
    30. Export Preview (Fázis 7)
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════
   SECTION 1: Variables & Reset
   ═══════════════════════════════════════════════════════ */

/* Force WordPress Twemoji img tags to behave as inline text-sized icons */
img.emoji,
img.wp-smiley {
    height: 1em !important;
    width: 1em !important;
    display: inline !important;
    vertical-align: -0.1em !important;
    margin: 0 0.05em 0 0.1em !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

:root {
    --akv-bg: #f8fafc;
    --akv-bg-dark: #0f172a;
    --akv-surface: #ffffff;
    --akv-surface-dark: #1e293b;
    --akv-border: #e2e8f0;
    --akv-border-dark: #334155;
    --akv-text: #1e293b;
    --akv-text-dark: #f1f5f9;
    --akv-text-muted: #64748b;
    --akv-text-muted-dark: #94a3b8;
    --akv-primary: #6366f1;
    --akv-primary-hover: #4f46e5;
    --akv-success: #22c55e;
    --akv-warning: #f59e0b;
    --akv-danger: #ef4444;
    --akv-info: #3b82f6;
    --akv-primary-soft: #eef2ff;
    --akv-primary-soft-hover: #dbeafe;
    --akv-warning-soft: #fff7ed;
    --akv-warning-soft-border: #fed7aa;
    --akv-warning-badge-text: #ea580c;
    --akv-danger-soft: #fef2f2;
    --akv-danger-soft-border: #fecaca;
    --akv-status-pending-bg: #fef3c7;
    --akv-status-pending-text: #92400e;
    --akv-status-rejected-bg: #fef2f2;
    --akv-status-rejected-text: #991b1b;
    --akv-status-rerouted-bg: #fff7ed;
    --akv-status-rerouted-text: #9a3412;
    --akv-status-delivered-bg: #dbeafe;
    --akv-status-delivered-text: #1e40af;
    --akv-status-approved-bg: #dcfce7;
    --akv-status-approved-text: #166534;
    --akv-status-forwarded-bg: #e0e7ff;
    --akv-status-forwarded-text: #3730a3;
    --akv-status-read-bg: #ecfdf5;
    --akv-status-read-text: #065f46;
    --akv-jidoka-header: #ea580c;
    --akv-jidoka-details: #9a3412;
    --akv-jidoka-time: #c2410c;
    --akv-sidebar-w: 320px;
    --akv-header-h: 64px;
    --akv-radius: 12px;
    --akv-radius-sm: 8px;
    --akv-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --akv-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
}

[data-theme="dark"] {
    --akv-bg: var(--akv-bg-dark);
    --akv-surface: var(--akv-surface-dark);
    --akv-border: var(--akv-border-dark);
    --akv-text: var(--akv-text-dark);
    --akv-text-muted: var(--akv-text-muted-dark);
    --akv-primary-soft: rgba(99, 102, 241, 0.15);
    --akv-primary-soft-hover: rgba(99, 102, 241, 0.25);
    --akv-warning-soft: rgba(245, 158, 11, 0.12);
    --akv-warning-soft-border: rgba(245, 158, 11, 0.3);
    --akv-warning-badge-text: #fb923c;
    --akv-danger-soft: rgba(239, 68, 68, 0.12);
    --akv-danger-soft-border: rgba(239, 68, 68, 0.3);
    --akv-status-pending-bg: rgba(245, 158, 11, 0.15);
    --akv-status-pending-text: #fbbf24;
    --akv-status-rejected-bg: rgba(239, 68, 68, 0.12);
    --akv-status-rejected-text: #fca5a5;
    --akv-status-rerouted-bg: rgba(245, 158, 11, 0.12);
    --akv-status-rerouted-text: #fb923c;
    --akv-status-delivered-bg: rgba(59, 130, 246, 0.15);
    --akv-status-delivered-text: #93c5fd;
    --akv-status-approved-bg: rgba(34, 197, 94, 0.15);
    --akv-status-approved-text: #86efac;
    --akv-status-forwarded-bg: rgba(99, 102, 241, 0.15);
    --akv-status-forwarded-text: #a5b4fc;
    --akv-status-read-bg: rgba(16, 185, 129, 0.12);
    --akv-status-read-text: #6ee7b7;
    --akv-jidoka-header: #fb923c;
    --akv-jidoka-details: #fdba74;
    --akv-jidoka-time: #fb923c;
}

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

body.akv-komm-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--akv-bg);
    color: var(--akv-text);
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    /* Prevent bounce/scroll on iOS (both axes) */
    overscroll-behavior: none;
}

/* Root container — prevent any horizontal overflow */
#akv-komm-root {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════
   SECTION 2: Login Screen
   ═══════════════════════════════════════════════════════ */
.akv-login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    padding: 16px;
}

.akv-login-card {
    background: var(--akv-surface);
    border-radius: var(--akv-radius);
    padding: 40px 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--akv-shadow-lg);
}

.akv-login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.akv-login-logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--akv-primary);
    margin-bottom: 4px;
}

.akv-login-logo p {
    color: var(--akv-text-muted);
    font-size: 14px;
}

.akv-form-group {
    margin-bottom: 20px;
}

.akv-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--akv-text);
    margin-bottom: 6px;
}

.akv-form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--akv-border);
    border-radius: var(--akv-radius-sm);
    font-size: 15px;
    font-family: inherit;
    transition: border-color .2s;
    background: var(--akv-bg);
    color: var(--akv-text);
}

.akv-form-group input:focus {
    outline: none;
    border-color: var(--akv-primary);
}

.akv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--akv-radius-sm);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s;
}

.akv-btn-primary {
    background: var(--akv-primary);
    color: #fff;
}

/* Full-width only for login form button, not compose */
.akv-login-card .akv-btn-primary {
    width: 100%;
}

.akv-btn-primary:hover {
    background: var(--akv-primary-hover);
    transform: translateY(-1px);
}

.akv-btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 6px;
}

.akv-btn-success { background: var(--akv-success); color: #fff; }
.akv-btn-danger { background: var(--akv-danger); color: #fff; }
.akv-btn-info { background: var(--akv-info); color: #fff; }
.akv-btn-ghost {
    background: transparent;
    color: var(--akv-text-muted);
    border: 1px solid var(--akv-border);
}
.akv-btn-ghost:hover { background: var(--akv-bg); }

.akv-login-error {
    background: var(--akv-danger-soft);
    color: var(--akv-danger);
    padding: 10px 14px;
    border-radius: var(--akv-radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid var(--akv-danger-soft-border);
}

.akv-login-demo {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--akv-border);
}

.akv-login-demo h3 {
    font-size: 13px;
    color: var(--akv-text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.akv-demo-users {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.akv-demo-user {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .2s;
    color: #fff;
}

.akv-demo-user:hover {
    transform: scale(1.05);
    box-shadow: var(--akv-shadow);
}

/* ═══════════════════════════════════════════════════════
   SECTION 3: App Layout (sidebar, header)
   ═══════════════════════════════════════════════════════ */
.akv-app {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    max-width: 100vw;
}

.akv-sidebar {
    width: var(--akv-sidebar-w);
    background: var(--akv-surface);
    border-right: 1px solid var(--akv-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform .3s ease;
}

.akv-sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--akv-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--akv-header-h);
}

.akv-sidebar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--akv-primary);
}

.akv-sidebar-subtitle {
    font-size: 11px;
    color: var(--akv-text-muted);
    margin-top: 2px;
}

.akv-user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--akv-border);
    background: var(--akv-bg);
}

.akv-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

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

.akv-user-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.akv-user-role {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    margin-top: 2px;
}

.akv-project-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.akv-project-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--akv-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 12px 12px 6px;
}

.akv-project-item {
    padding: 14px 16px;
    border-radius: var(--akv-radius-sm);
    cursor: pointer;
    margin-bottom: 4px;
    transition: all .15s;
}

.akv-project-item:hover {
    background: var(--akv-bg);
}

.akv-project-item.active {
    background: var(--akv-primary-soft);
    border-left: 3px solid var(--akv-primary);
}

.akv-project-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.akv-project-desc {
    font-size: 12px;
    color: var(--akv-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.akv-project-meta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--akv-text-muted);
}

.akv-sidebar-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--akv-border);
    display: flex;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════
   SECTION 4: Main Content
   ═══════════════════════════════════════════════════════ */
.akv-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    max-width: 100%;
}

.akv-main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.akv-main-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--akv-border);
    background: var(--akv-surface);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.akv-header-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.akv-header-project-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.akv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--akv-bg);
    padding: 4px;
    border-radius: var(--akv-radius-sm);
}

.akv-tab {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--akv-text-muted);
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
}

.akv-tab.active {
    background: var(--akv-surface);
    color: var(--akv-primary);
    box-shadow: var(--akv-shadow);
    font-weight: 600;
}

.akv-export-btn {
    background: var(--akv-primary-soft) !important;
    color: var(--akv-primary) !important;
    border: 1px solid var(--akv-primary) !important;
    margin-left: auto;
}
.akv-export-btn:hover {
    background: var(--akv-primary) !important;
    color: #fff !important;
}

.akv-tab .akv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--akv-danger);
    margin-left: 6px;
}

/* ═══════════════════════════════════════════════════════
   SECTION 5: Messages
   ═══════════════════════════════════════════════════════ */
.akv-messages-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overscroll-behavior-x: none;
}

.akv-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: akv-fadeIn .3s ease;
}

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

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

.akv-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
    font-weight: 700;
}

.akv-message-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    position: relative;
}

.akv-message:not(.sent) .akv-message-bubble {
    background: var(--akv-surface);
    border: 1px solid var(--akv-border);
    border-bottom-left-radius: 4px;
}

.akv-message.sent .akv-message-bubble {
    background: var(--akv-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.akv-message-sender {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.akv-message-recipient-arrow {
    font-size: 12px;
    color: var(--akv-text-muted);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.akv-message-recipient-arrow .akv-recipient-name {
    font-weight: 600;
    color: var(--akv-text);
}

.akv-message-role-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
}

.akv-message-text {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.akv-message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--akv-text-muted);
}

.akv-message.sent .akv-message-meta {
    color: rgba(255,255,255,.7);
}

.akv-message-status {
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.akv-status-pending { background: var(--akv-status-pending-bg); color: var(--akv-status-pending-text); }
.akv-status-delivered { background: var(--akv-status-delivered-bg); color: var(--akv-status-delivered-text); }
.akv-status-approved { background: var(--akv-status-approved-bg); color: var(--akv-status-approved-text); }
.akv-status-rejected { background: var(--akv-status-rejected-bg); color: var(--akv-status-rejected-text); }
.akv-status-forwarded { background: var(--akv-status-forwarded-bg); color: var(--akv-status-forwarded-text); }
.akv-status-read { background: var(--akv-status-read-bg); color: var(--akv-status-read-text); }
.akv-status-rerouted { background: var(--akv-status-rerouted-bg); color: var(--akv-status-rerouted-text); }

/* ═══════════════════════════════════════════════════════
   SECTION 6: Coordinator Actions
   ═══════════════════════════════════════════════════════ */
.akv-coordinator-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.akv-message-rerouted-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--akv-warning-soft);
    color: var(--akv-warning-badge-text);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════
   SECTION 7: Compose Area
   ═══════════════════════════════════════════════════════ */
.akv-compose {
    padding: 16px 24px;
    border-top: 1px solid var(--akv-border);
    background: var(--akv-surface);
}

.akv-compose-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.akv-compose-row .akv-btn-primary {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 12px 20px;
}

.akv-compose-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--akv-border);
    border-radius: var(--akv-radius);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    min-height: 48px;
    max-height: 120px;
    transition: border-color .2s;
    background: var(--akv-bg);
    color: var(--akv-text);
}

.akv-compose-input:focus {
    outline: none;
    border-color: var(--akv-primary);
}

.akv-compose-select {
    padding: 12px 14px;
    border: 2px solid var(--akv-border);
    border-radius: var(--akv-radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: var(--akv-bg);
    color: var(--akv-text);
    min-width: 160px;
}

.akv-compose-hint {
    font-size: 11px;
    color: var(--akv-text-muted);
    margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════
   SECTION 8: Members Panel
   ═══════════════════════════════════════════════════════ */
.akv-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.akv-member-card {
    background: var(--akv-surface);
    border: 1px solid var(--akv-border);
    border-radius: var(--akv-radius);
    padding: 20px;
    text-align: center;
    transition: all .2s;
}

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

.akv-member-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-bottom: 12px;
}

.akv-member-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.akv-member-role {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    color: #fff;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════
   SECTION 9: Jidoka Panel
   ═══════════════════════════════════════════════════════ */
.akv-jidoka-list {
    padding: 20px 24px;
    flex: 1;
    overflow-y: auto;
}

.akv-jidoka-item {
    background: var(--akv-warning-soft);
    border: 1px solid var(--akv-warning-soft-border);
    border-radius: var(--akv-radius-sm);
    padding: 16px;
    margin-bottom: 12px;
}

.akv-jidoka-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--akv-jidoka-header);
    margin-bottom: 8px;
}

.akv-jidoka-details {
    font-size: 13px;
    color: var(--akv-jidoka-details);
    line-height: 1.5;
}

.akv-jidoka-time {
    font-size: 11px;
    color: var(--akv-jidoka-time);
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════
   SECTION 10: Empty / Loading States
   ═══════════════════════════════════════════════════════ */
.akv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px;
    text-align: center;
    color: var(--akv-text-muted);
}

.akv-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: .5;
}

.akv-empty-text {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
}

.akv-empty-hint {
    font-size: 13px;
}

.akv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.akv-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--akv-border);
    border-top-color: var(--akv-primary);
    border-radius: 50%;
    animation: akv-spin .8s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════
   SECTION 11: (Moved to SECTION 25 — App-like UX)
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   SECTION 12: Mobile / Hamburger
   ═══════════════════════════════════════════════════════ */
.akv-hamburger {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
}

.akv-hamburger:hover { background: var(--akv-bg); }

.akv-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--akv-text);
    margin: 5px 0;
    border-radius: 1px;
    transition: all .3s;
}

.akv-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 90;
}

/* ═══════════════════════════════════════════════════════
   SECTION 13: Stats Panel
   ═══════════════════════════════════════════════════════ */
.akv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px 24px;
}

.akv-stat-card {
    background: var(--akv-surface);
    border: 1px solid var(--akv-border);
    border-radius: var(--akv-radius);
    padding: 20px;
    text-align: center;
}

.akv-stat-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--akv-primary);
}

.akv-stat-label {
    font-size: 13px;
    color: var(--akv-text-muted);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════
   SECTION 14: Responsive
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .akv-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        width: 85vw;
        max-width: 320px;
    }

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

    .akv-overlay.visible {
        display: block;
    }

    .akv-hamburger {
        display: block;
    }

    /* ── Header ── */
    .akv-main-header {
        padding: 10px 12px;
        gap: 8px;
    }

    .akv-header-top-row {
        gap: 8px;
    }

    .akv-header-project-title {
        font-size: 15px;
    }

    .akv-project-deadline-badge {
        font-size: 10px;
        padding: 2px 7px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Tabs hidden on mobile — bottom nav replaces them (see SECTION 25) */

    /* ── Messages ── */
    .akv-messages-area {
        padding: 12px 10px;
    }

    .akv-message {
        max-width: 94%;
    }

    .akv-message-sender {
        font-size: 12px;
    }

    .akv-message-text {
        font-size: 13px;
    }

    .akv-message-time {
        font-size: 10px;
    }

    /* ── Compose ── */
    /* Coordinator action buttons: fit within message bubble */
    .akv-coordinator-actions {
        gap: 4px;
    }
    .akv-coordinator-actions .akv-btn {
        font-size: 11px;
        padding: 4px 8px;
    }

    .akv-compose {
        padding: 10px 12px;
    }

    .akv-compose-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .akv-compose-select {
        min-width: 100%;
        flex: 1 1 100%;
    }

    .akv-compose-input {
        flex: 1 1 60%;
        min-width: 0;
        font-size: 14px;
    }

    .akv-compose-options {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ── Members grid ── */
    .akv-members-grid {
        grid-template-columns: 1fr;
        padding: 12px 10px;
    }

    /* ── Stats grid ── */
    .akv-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 12px 10px;
    }

    /* ── Search bar ── */
    .akv-search-bar {
        padding: 10px 12px !important;
    }

    .akv-search-bar input {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }

    /* ── Attachments ── */
    .akv-attachment {
        max-width: 220px;
        font-size: 11px;
        padding: 6px 10px;
    }

    /* ── Task items ── */
    .akv-task-item {
        padding: 10px 12px;
    }
}

/* ── Extra-small screens (≤480px) ── */
@media (max-width: 480px) {
    .akv-header-project-title {
        font-size: 14px;
    }

    .akv-project-deadline-badge {
        font-size: 9px;
        padding: 2px 5px;
        max-width: 90px;
    }

    .akv-compose-input {
        font-size: 16px; /* prevent iOS zoom on focus */
    }

    .akv-message {
        max-width: 96%;
    }

    /* Smaller bottom nav labels */
    .akv-bottom-nav-item {
        font-size: 9px;
    }
    .akv-bottom-nav-icon {
        font-size: 18px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .akv-sidebar {
        width: 260px;
    }
}

/* ═══════════════════════════════════════════════════════
   SECTION 15: Theme Toggle
   ═══════════════════════════════════════════════════════ */
.akv-theme-toggle {
    width: 36px;
    height: 36px;
    border: 1px solid var(--akv-border);
    border-radius: 8px;
    background: var(--akv-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all .2s;
}

.akv-theme-toggle:hover {
    background: var(--akv-border);
}

/* ═══════════════════════════════════════════════════════
   SECTION 16: File Attachments
   ═══════════════════════════════════════════════════════ */
.akv-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.akv-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--akv-bg);
    border: 1px solid var(--akv-border);
    border-radius: 8px;
    font-size: 12px;
    text-decoration: none;
    color: var(--akv-text);
    transition: all .15s;
    max-width: 280px;
}

.akv-attachment:hover {
    background: var(--akv-border);
    transform: translateY(-1px);
    box-shadow: var(--akv-shadow);
}

.akv-message.sent .akv-attachment {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}

.akv-message.sent .akv-attachment:hover {
    background: rgba(255,255,255,.25);
}

.akv-attachment-icon {
    font-size: 20px;
    flex-shrink: 0;
}

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

.akv-attachment-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.akv-attachment-size {
    font-size: 11px;
    color: var(--akv-text-muted);
}

.akv-message.sent .akv-attachment-size {
    color: rgba(255,255,255,.6);
}

.akv-attachment-image-preview {
    width: 100%;
    max-width: 240px;
    border-radius: 8px;
    margin-top: 8px;
    cursor: pointer;
    transition: transform .2s;
}

.akv-attachment-image-preview:hover {
    transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════
   SECTION 17: Compose File Upload
   ═══════════════════════════════════════════════════════ */
.akv-compose-file-btn {
    width: 44px;
    height: 44px;
    border: 2px dashed var(--akv-border);
    border-radius: var(--akv-radius-sm);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--akv-text-muted);
    transition: all .2s;
    flex-shrink: 0;
}

.akv-compose-file-btn:hover {
    border-color: var(--akv-primary);
    color: var(--akv-primary);
    background: var(--akv-primary-soft);
}

.akv-compose-file-input {
    display: none;
}

.akv-file-preview-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0 0;
}

.akv-file-preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--akv-primary-soft);
    border-radius: 6px;
    font-size: 12px;
    color: var(--akv-primary);
    font-weight: 500;
}

.akv-file-preview-remove {
    cursor: pointer;
    opacity: .7;
    font-size: 14px;
}

.akv-file-preview-remove:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   SECTION 18: Documents Tab
   ═══════════════════════════════════════════════════════ */
.akv-files-list {
    padding: 20px 24px;
    flex: 1;
    overflow-y: auto;
}

.akv-file-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--akv-border);
    border-radius: var(--akv-radius-sm);
    margin-bottom: 8px;
    transition: all .15s;
    background: var(--akv-surface);
}

.akv-file-row:hover {
    box-shadow: var(--akv-shadow);
    transform: translateY(-1px);
}

.akv-file-row-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.akv-file-row-info {
    flex: 1;
    min-width: 0;
}

.akv-file-row-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.akv-file-row-meta {
    font-size: 12px;
    color: var(--akv-text-muted);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.akv-file-row-sender {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.akv-file-row-actions a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--akv-primary);
    background: var(--akv-primary-soft);
    transition: all .15s;
}

.akv-file-row-actions a:hover {
    background: var(--akv-primary-soft-hover);
}

@media (max-width: 768px) {
    .akv-file-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .akv-file-row-actions {
        align-self: flex-end;
    }
}

/* ── Fázis 4: Standalone Documents ── */
.akv-doc-view-switcher {
    display: flex;
    gap: 0;
    padding: 12px 24px 0;
    border-bottom: 1px solid var(--akv-border);
}

.akv-doc-view-btn {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--akv-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .15s;
}

.akv-doc-view-btn.active {
    color: var(--akv-primary);
    border-bottom-color: var(--akv-primary);
}

.akv-doc-view-btn:hover:not(.active) {
    color: var(--akv-text);
}

.akv-doc-upload-section {
    padding: 16px 24px;
    border-bottom: 1px solid var(--akv-border);
    background: var(--akv-bg);
}

.akv-doc-upload-header {
    font-size: 14px;
    margin-bottom: 10px;
}

.akv-doc-upload-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.akv-doc-input {
    padding: 8px 12px;
    border: 1px solid var(--akv-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--akv-surface);
    color: var(--akv-text);
    width: 100%;
    box-sizing: border-box;
}

.akv-doc-select {
    padding: 8px 12px;
    border: 1px solid var(--akv-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--akv-surface);
    color: var(--akv-text);
}

.akv-doc-upload-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.akv-doc-upload-row .akv-doc-select {
    flex: 1;
    min-width: 150px;
}

.akv-doc-file-label {
    cursor: pointer;
}

.akv-doc-target-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--akv-text-muted);
    margin-bottom: 4px;
    margin-top: 4px;
}

.akv-doc-target-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.akv-doc-target-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border: 1px solid var(--akv-border);
    border-radius: 4px;
    background: var(--akv-surface);
    transition: all .1s;
}

.akv-doc-target-item:has(input:checked) {
    border-color: var(--akv-primary);
    background: var(--akv-primary-soft);
}

.akv-doc-selected-file {
    font-size: 12px;
    color: var(--akv-text-muted);
    padding: 4px 0;
}

.akv-doc-upload-btn {
    align-self: flex-start;
}

.akv-doc-filter-bar {
    display: flex;
    gap: 6px;
    padding: 12px 24px;
    flex-wrap: wrap;
}

.akv-doc-filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--akv-border);
    border-radius: 20px;
    background: var(--akv-surface);
    color: var(--akv-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

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

.akv-doc-filter-btn:hover:not(.active) {
    border-color: var(--akv-primary);
    color: var(--akv-primary);
}

.akv-docs-list {
    padding: 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.akv-doc-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--akv-border);
    border-radius: var(--akv-radius-sm);
    background: var(--akv-surface);
    transition: all .15s;
}

.akv-doc-card:hover {
    box-shadow: var(--akv-shadow);
}

.akv-doc-card.akv-doc-pending {
    border-left: 3px solid #f59e0b;
}

.akv-doc-card-editing {
    border-color: var(--akv-primary);
    background: var(--akv-bg);
}

.akv-doc-card-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
}

.akv-doc-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.akv-doc-card-title {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.akv-doc-card-desc {
    font-size: 12px;
    color: var(--akv-text-muted);
    line-height: 1.4;
}

.akv-doc-card-meta {
    font-size: 11px;
    color: var(--akv-text-muted);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.akv-doc-card-uploader {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.akv-doc-card-shared {
    font-size: 11px;
    color: var(--akv-text-muted);
    font-style: italic;
}

.akv-doc-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: flex-start;
}

.akv-doc-status-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.akv-doc-status-pending_approval {
    background: #fef3c7;
    color: #92400e;
}

.akv-doc-status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.akv-btn-danger {
    color: #dc2626;
    border-color: #fca5a5;
    background: #fef2f2;
}

.akv-btn-danger:hover {
    background: #fee2e2;
}

[data-theme="dark"] .akv-doc-status-pending_approval {
    background: #78350f;
    color: #fde68a;
}

[data-theme="dark"] .akv-doc-status-rejected {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .akv-btn-danger {
    color: #fca5a5;
    border-color: #7f1d1d;
    background: #2a0a0a;
}

@media (max-width: 768px) {
    .akv-doc-card {
        flex-direction: column;
        gap: 8px;
    }
    .akv-doc-card-actions {
        align-self: flex-end;
    }
    .akv-doc-upload-row {
        flex-direction: column;
    }
    .akv-doc-filter-bar {
        padding: 8px 16px;
    }
    .akv-docs-list {
        padding: 8px 16px;
    }
    .akv-doc-upload-section {
        padding: 12px 16px;
    }
    .akv-doc-view-switcher {
        padding: 8px 16px 0;
    }
}

/* ═══════════════════════════════════════════════════════
   SECTION 19: Project Create / Message Actions / Search
   ═══════════════════════════════════════════════════════ */
.akv-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--akv-primary);
    background: transparent;
    color: var(--akv-primary);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    line-height: 1;
    padding: 0;
}
.akv-btn-icon:hover {
    background: var(--akv-primary);
    color: #fff;
    transform: scale(1.1);
}

/* ── NEW: Message action buttons (edit/delete) ── */
.akv-msg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.5;
    transition: all .15s;
    color: var(--akv-text-muted);
}
.akv-msg-action-btn:hover {
    opacity: 1;
    background: var(--akv-bg);
}
.akv-delete-msg-btn:hover {
    color: var(--akv-danger);
}

/* ── NEW: User search results ── */
.akv-user-search-result:hover {
    background: var(--akv-bg) !important;
}

/* ── NEW: Inline edit textarea ── */
.akv-edit-inline textarea {
    font-family: inherit;
    background: var(--akv-surface);
    color: var(--akv-text);
}

/* ── NEW: Search bar input focus ── */
.akv-search-bar input:focus {
    outline: none;
    border-color: var(--akv-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ═══════════════════════════════════════════════════════
   SECTION 20: Compose Options / Broadcast / Priority / Deadline
   ═══════════════════════════════════════════════════════ */
.akv-compose-options {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--akv-border);
    background: var(--akv-bg);
    flex-wrap: wrap;
    align-items: center;
}
.akv-compose-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: var(--akv-surface);
    color: var(--akv-text-muted);
    border: 1px solid var(--akv-border);
    transition: all 0.2s;
    user-select: none;
}
.akv-compose-toggle:hover {
    border-color: var(--akv-primary);
    color: var(--akv-primary);
}
.akv-compose-toggle.active {
    background: var(--akv-primary);
    color: #fff;
    border-color: var(--akv-primary);
}
.akv-compose-toggle.active.urgent {
    background: var(--akv-danger);
    border-color: var(--akv-danger);
}
.akv-compose-deadline-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--akv-text-muted);
}
.akv-deadline-input {
    padding: 3px 6px;
    border: 1px solid var(--akv-border);
    border-radius: 6px;
    font-size: 11px;
    background: var(--akv-surface);
    color: var(--akv-text);
    max-width: 180px;
}
.akv-deadline-input:focus {
    outline: none;
    border-color: var(--akv-primary);
}

/* Broadcast badge in compose */
.akv-broadcast-badge {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
    color: var(--akv-primary);
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

/* Urgent send button */
.akv-btn-urgent {
    background: var(--akv-danger) !important;
    border-color: var(--akv-danger) !important;
}
.akv-btn-urgent:hover {
    filter: brightness(0.9);
}

/* ── Priority/Broadcast/Deadline message badges ── */
.akv-message.akv-urgent .akv-message-bubble {
    border-left: 3px solid var(--akv-danger);
}
.akv-message.akv-broadcast .akv-message-bubble {
    border-left: 3px solid var(--akv-primary);
}
.akv-urgent-badge {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--akv-danger) !important;
    font-weight: 700;
}
.akv-broadcast-msg-badge {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05)) !important;
    color: var(--akv-primary) !important;
    font-weight: 600;
}
.akv-deadline-badge {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #b45309 !important;
    font-weight: 500;
}
.akv-deadline-badge.expired {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--akv-danger) !important;
    font-weight: 700;
}

/* ── Project deadline badge in header ── */
.akv-project-deadline-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    flex-shrink: 0;
    white-space: nowrap;
}
.akv-project-deadline-badge.expired {
    background: rgba(239, 68, 68, 0.15);
    color: var(--akv-danger);
    animation: akv-pulse 2s infinite;
}
@keyframes akv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════
   SECTION 21: Coordinator Tasks
   ═══════════════════════════════════════════════════════ */
.akv-task-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--akv-surface);
    border: 1px solid var(--akv-border);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: all 0.15s;
}
.akv-task-item:hover {
    border-color: var(--akv-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.akv-task-item.akv-task-done {
    opacity: 0.6;
}
.akv-task-item.akv-task-done .akv-task-text {
    text-decoration: line-through;
}
.akv-task-item.akv-task-waiting {
    border-left: 3px solid var(--akv-warning);
}
.akv-task-item.akv-task-active {
    border-left: 3px solid var(--akv-primary);
}
.akv-task-status-icon {
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}
.akv-task-content {
    flex: 1;
    min-width: 0;
}
.akv-task-text {
    font-size: 13px;
    color: var(--akv-text);
    line-height: 1.5;
    word-break: break-word;
}
.akv-task-role-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--akv-primary-soft, rgba(99, 102, 241, 0.1));
    color: var(--akv-primary);
}
.akv-task-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.akv-task-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.akv-task-actions button:hover {
    opacity: 1;
    background: var(--akv-bg);
}
.akv-badge-tasks {
    background: #4338ca !important;
}

/* ═══════════════════════════════════════════════════════
   SECTION 22: Member Notes
   ═══════════════════════════════════════════════════════ */
.akv-member-notes-section {
    border-top: 1px solid var(--akv-border);
    padding-top: 8px;
}

/* Member card with profile image */
.akv-member-avatar-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 12px;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--akv-border);
}

/* ═══════════════════════════════════════════════════════
   SECTION 23: Project Sheet (Fázis 2)
   ═══════════════════════════════════════════════════════ */

/* Container */
.akv-sheet-container {
    padding: 24px;
    max-width: 900px;
    overflow-y: auto;
    max-height: calc(100vh - 130px);
}

/* Header: title + edit/save buttons */
.akv-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.akv-sheet-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--akv-text);
    margin: 0;
}
.akv-sheet-actions {
    display: flex;
    gap: 8px;
}

/* Cover image */
.akv-sheet-cover {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: var(--akv-bg);
    margin-bottom: 20px;
    border: 1px solid var(--akv-border);
}

/* Description (read mode) */
.akv-sheet-desc {
    color: var(--akv-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px;
    white-space: pre-wrap;
}

/* Section blocks */
.akv-sheet-section {
    margin-bottom: 24px;
}
.akv-sheet-section h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--akv-text-muted);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--akv-border);
}

/* Status badge */
.akv-sheet-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.akv-sheet-status-active {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}
.akv-sheet-status-completed {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}
.akv-sheet-status-archived {
    background: rgba(156, 163, 175, 0.15);
    color: #6b7280;
}

/* Deadline inline */
.akv-sheet-deadline {
    margin-left: 12px;
    font-size: 13px;
    color: var(--akv-text-muted);
}

/* Info grid (read mode) — 2 columns */
.akv-sheet-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.akv-sheet-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.akv-sheet-info-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--akv-text-muted);
}
.akv-sheet-info-value {
    font-size: 14px;
    color: var(--akv-text);
    font-weight: 500;
}

/* Empty state inside sheet */
.akv-sheet-empty {
    padding: 20px;
    text-align: center;
    color: var(--akv-text-muted);
    font-size: 13px;
    background: var(--akv-bg);
    border-radius: 8px;
}

/* Meta footer */
.akv-sheet-meta {
    display: flex;
    gap: 24px;
    font-size: 12px;
    color: var(--akv-text-muted);
    padding-top: 16px;
    border-top: 1px solid var(--akv-border);
}

/* ── Edit mode form ── */
.akv-sheet-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Form grid — 2 columns */
.akv-sheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.akv-sheet-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.akv-sheet-field-full {
    grid-column: 1 / -1;
}
.akv-sheet-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--akv-text-muted);
}
.akv-sheet-field input,
.akv-sheet-field select,
.akv-sheet-field textarea {
    padding: 8px 12px;
    border: 1px solid var(--akv-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--akv-surface);
    color: var(--akv-text);
    font-family: inherit;
    transition: border-color 0.15s;
}
.akv-sheet-field input:focus,
.akv-sheet-field select:focus,
.akv-sheet-field textarea:focus {
    outline: none;
    border-color: var(--akv-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.akv-sheet-field textarea {
    resize: vertical;
}

/* Cover image upload area */
.akv-sheet-cover-upload {
    display: flex;
    align-items: center;
    gap: 16px;
}
.akv-sheet-cover-preview {
    width: 160px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--akv-border);
}
.akv-sheet-cover-placeholder {
    width: 160px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--akv-bg);
    border: 2px dashed var(--akv-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--akv-text-muted);
}

/* Custom fields rows */
.akv-sheet-custom-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}
.akv-sheet-custom-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--akv-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--akv-surface);
    color: var(--akv-text);
    font-family: inherit;
}
.akv-sheet-custom-row input:focus {
    outline: none;
    border-color: var(--akv-primary);
}
.akv-btn-danger-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--akv-danger);
    font-size: 16px;
    padding: 4px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.akv-btn-danger-icon:hover {
    opacity: 1;
}

/* Responsive — single column on mobile */
@media (max-width: 640px) {
    .akv-sheet-container {
        padding: 14px;
        max-height: calc(100vh - 160px);
    }
    .akv-sheet-grid {
        grid-template-columns: 1fr;
    }
    .akv-sheet-info-grid {
        grid-template-columns: 1fr;
    }
    .akv-sheet-cover {
        height: 140px;
    }
    .akv-sheet-meta {
        flex-direction: column;
        gap: 4px;
    }
    .akv-sheet-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .akv-sheet-cover-upload {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════
   SECTION 24: Profile Modal (Fázis 3)
   ═══════════════════════════════════════════════════════ */

/* Overlay */
.akv-profile-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

/* Modal container */
.akv-profile-modal {
    background: var(--akv-surface);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Modal header */
.akv-profile-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--akv-border);
}
.akv-profile-modal-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--akv-text);
}
.akv-profile-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--akv-text-muted);
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}
.akv-profile-close-btn:hover {
    color: var(--akv-text);
}

/* Modal body — scrollable */
.akv-profile-modal-body {
    overflow-y: auto;
    padding: 20px;
    flex: 1;
}

/* Top section — avatar, name, role */
.akv-profile-top {
    text-align: center;
    margin-bottom: 24px;
}
.akv-profile-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-block;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--akv-border);
    margin-bottom: 8px;
}
.akv-profile-avatar-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    margin-bottom: 8px;
}
.akv-profile-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--akv-text);
    margin-bottom: 6px;
}

/* Sections */
.akv-profile-section {
    margin-bottom: 20px;
}
.akv-profile-section h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--akv-text-muted);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--akv-border);
}

/* Profile fields — view mode */
.akv-profile-fields-view .akv-profile-field-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--akv-border);
}
.akv-profile-fields-view .akv-profile-field-item:last-of-type {
    border-bottom: none;
}
.akv-profile-field-label {
    font-size: 13px;
    color: var(--akv-text-muted);
    font-weight: 500;
}
.akv-profile-field-value {
    font-size: 13px;
    color: var(--akv-text);
    font-weight: 600;
    text-align: right;
}

/* Profile fields — edit mode */
.akv-profile-fields .akv-profile-field-row {
    margin-bottom: 10px;
}
.akv-profile-fields .akv-profile-field-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--akv-text-muted);
    margin-bottom: 4px;
}
.akv-profile-fields .akv-profile-field-row input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--akv-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--akv-surface);
    color: var(--akv-text);
    transition: border-color 0.15s;
}
.akv-profile-fields .akv-profile-field-row input:focus {
    outline: none;
    border-color: var(--akv-primary);
}

/* Document items */
.akv-profile-doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--akv-border);
}
.akv-profile-doc-item:last-child {
    border-bottom: none;
}
.akv-profile-doc-info {
    flex: 1;
    min-width: 0;
}
.akv-profile-doc-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--akv-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.akv-profile-doc-name:hover {
    text-decoration: underline;
}
.akv-profile-doc-meta {
    display: block;
    font-size: 11px;
    color: var(--akv-text-muted);
    margin-top: 2px;
}
.akv-profile-doc-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    opacity: 0.5;
    transition: opacity 0.15s;
    flex-shrink: 0;
    margin-left: 8px;
}
.akv-profile-doc-delete:hover {
    opacity: 1;
}

/* Responsive — Profile modal */
@media (max-width: 768px) {
    .akv-profile-overlay {
        padding: 12px;
        align-items: flex-end;
    }
    .akv-profile-modal {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
    }
    .akv-profile-modal-body {
        padding: 16px;
    }
    .akv-profile-name {
        font-size: 18px;
    }
    .akv-profile-avatar-img,
    .akv-profile-avatar-icon {
        width: 64px;
        height: 64px;
    }
    .akv-profile-avatar-icon {
        font-size: 28px;
    }
}
@media (max-width: 480px) {
    .akv-profile-overlay {
        padding: 0;
    }
    .akv-profile-modal {
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
    }
}

/* ═══════════════════════════════════════════════════════
   SECTION 25: App-like UX (Bottom Nav, Pull-to-Refresh,
               Skeleton, Haptic, Swipe, Toast v2, Settings)
   ═══════════════════════════════════════════════════════ */

/* ── Nav Portal: fixed container outside zoomed root ── */
/* On desktop: hidden. On mobile: fixed at bottom of viewport. */
/* This avoids the iOS Safari bug where position:fixed inside */
/* overflow:hidden body can detach from viewport during scroll. */
#akv-nav-portal {
    display: none;
}

/* ── #1 Bottom Navigation Bar ── */
.akv-bottom-nav {
    display: none; /* Hidden on desktop, shown on mobile via media query */
}

/* ── #4 Enhanced Toast ── */
.akv-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    animation: akv-toastIn .35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 90vw;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px);
}
.akv-toast.akv-toast-exit {
    animation: akv-toastOut .25s ease forwards;
}
@keyframes akv-toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(30px) scale(0.9); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes akv-toastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    to { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); }
}
.akv-toast-success {
    background: rgba(22, 163, 74, 0.95);
    color: #fff;
}
.akv-toast-warning {
    background: rgba(234, 88, 12, 0.95);
    color: #fff;
}
.akv-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.akv-toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 16px;
    padding: 0 0 0 8px;
    line-height: 1;
    flex-shrink: 0;
}
.akv-toast-close:hover { color: #fff; }
.akv-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255,255,255,0.4);
    border-radius: 0 0 12px 12px;
    animation: akv-toastProgress linear forwards;
}
@keyframes akv-toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ── #5 Skeleton Loading ── */
.akv-skeleton {
    background: linear-gradient(90deg, var(--akv-border) 25%, var(--akv-bg) 50%, var(--akv-border) 75%);
    background-size: 200% 100%;
    animation: akv-shimmer 1.5s infinite;
    border-radius: 6px;
}
@keyframes akv-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.akv-skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 80%;
}
.akv-skeleton-text.short { width: 50%; }
.akv-skeleton-text.tiny { width: 30%; height: 10px; }
.akv-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
.akv-skeleton-card {
    height: 100px;
    border-radius: 12px;
}
.akv-skeleton-msg {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}
.akv-skeleton-msg-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── #6 Haptic-like Feedback ── */
.akv-tab:active,
.akv-btn:active,
.akv-btn-primary:active,
.akv-btn-ghost:active,
.akv-project-item:active,
.akv-member-card:active,
.akv-file-row:active,
.akv-task-item:active,
.akv-compose-toggle:active,
.akv-bottom-nav-item:active {
    transform: scale(0.96);
    transition: transform 0.08s ease;
}

/* ── #7 Settings Modal ── */
.akv-settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: akv-fadeIn 0.2s ease;
}
@keyframes akv-fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
.akv-settings-modal {
    background: var(--akv-surface);
    border-radius: 16px;
    width: 340px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    animation: akv-modalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes akv-modalPop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.akv-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--akv-border);
}
.akv-settings-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--akv-text);
}
.akv-settings-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--akv-text-muted);
    padding: 4px;
    line-height: 1;
}
.akv-settings-body {
    padding: 16px 20px;
}
.akv-settings-section {
    margin-bottom: 20px;
}
.akv-settings-section:last-child {
    margin-bottom: 8px;
}
.akv-settings-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--akv-text);
    margin-bottom: 10px;
    display: block;
}
.akv-settings-hint {
    font-size: 11px;
    color: var(--akv-text-muted);
    margin-top: 4px;
    font-weight: 400;
}
.akv-zoom-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.akv-zoom-btn {
    flex: 1;
    min-width: 50px;
    padding: 10px 4px;
    border: 2px solid var(--akv-border);
    border-radius: 10px;
    background: var(--akv-bg);
    color: var(--akv-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-align: center;
}
.akv-zoom-btn:hover {
    border-color: var(--akv-primary);
    background: var(--akv-primary-soft);
}
.akv-zoom-btn.active {
    border-color: var(--akv-primary);
    background: var(--akv-primary);
    color: #fff;
}
.akv-theme-options {
    display: flex;
    gap: 8px;
}
.akv-theme-option {
    flex: 1;
    padding: 14px 12px;
    border: 2px solid var(--akv-border);
    border-radius: 12px;
    background: var(--akv-bg);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    font-family: inherit;
}
.akv-theme-option:hover {
    border-color: var(--akv-primary);
}
.akv-theme-option.active {
    border-color: var(--akv-primary);
    background: var(--akv-primary-soft);
}
.akv-theme-option-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 4px;
}
.akv-theme-option-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--akv-text);
}

/* ── #2 Pull-to-Refresh ── */
.akv-ptr-indicator {
    text-align: center;
    overflow: hidden;
    height: 0;
    transition: height 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--akv-text-muted);
    font-size: 12px;
    gap: 8px;
}
.akv-ptr-indicator.pulling {
    height: 50px;
}
.akv-ptr-indicator.refreshing {
    height: 50px;
}
.akv-ptr-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--akv-border);
    border-top-color: var(--akv-primary);
    border-radius: 50%;
    animation: akv-spin 0.8s linear infinite;
}
@keyframes akv-spin {
    to { transform: rotate(360deg); }
}
.akv-ptr-arrow {
    font-size: 18px;
    transition: transform 0.2s;
}
.akv-ptr-indicator.ready .akv-ptr-arrow {
    transform: rotate(180deg);
}

/* ── Mobile-specific: Bottom Nav + Toast positioning ── */
@media (max-width: 768px) {
    /* Hide header tabs on mobile — bottom nav replaces them */
    .akv-tabs {
        display: none !important;
    }

    .akv-main-header {
        gap: 0;
    }

    /* Nav portal: fixed container at viewport bottom */
    #akv-nav-portal {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 90;
    }

    /* Bottom navigation bar — inside the fixed portal, no need for own fixed */
    .akv-bottom-nav {
        display: flex;
        position: relative; /* anchor for more-menu absolute positioning */
        background: var(--akv-surface);
        border-top: 1px solid var(--akv-border);
        padding: 4px 0;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
        width: 100%;
        max-width: 100vw;
    }
    .akv-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 2px;
        min-height: 44px; /* Apple HIG minimum touch target */
        border: none;
        background: transparent;
        color: var(--akv-text-muted);
        font-size: 10px;
        font-weight: 500;
        cursor: pointer;
        font-family: inherit;
        transition: color 0.15s, transform 0.08s;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    .akv-bottom-nav-icon {
        font-size: 20px;
        line-height: 1;
    }
    .akv-bottom-nav-item.active {
        color: var(--akv-primary);
        font-weight: 600;
    }
    .akv-bottom-nav-item.active .akv-bottom-nav-icon {
        transform: scale(1.1);
    }
    .akv-bottom-nav-badge {
        position: absolute;
        top: 2px;
        right: calc(50% - 18px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        font-size: 9px;
        font-weight: 700;
        color: #fff;
        background: var(--akv-danger);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* More menu inside bottom nav — ensure it stays within viewport */
    .akv-bottom-nav-more-menu {
        position: absolute;
        bottom: 100%;
        right: 12px;
        background: var(--akv-surface);
        border: 1px solid var(--akv-border);
        border-radius: 12px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        padding: 6px;
        margin-bottom: 8px;
        min-width: 150px;
        max-width: calc(100vw - 32px);
        z-index: 91;
        animation: akv-menuPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes akv-menuPop {
        from { opacity: 0; transform: translateY(10px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .akv-bottom-nav-more-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border: none;
        background: transparent;
        color: var(--akv-text);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        border-radius: 8px;
        width: 100%;
        font-family: inherit;
        transition: background 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .akv-bottom-nav-more-item:hover,
    .akv-bottom-nav-more-item:active {
        background: var(--akv-bg);
    }
    .akv-bottom-nav-more-item.active {
        color: var(--akv-primary);
        font-weight: 600;
    }

    /* Adjust main content for bottom nav height (safe-area for iPhone home bar) */
    .akv-main {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
    .akv-app {
        height: 100vh;
        height: 100dvh; /* dynamic viewport for mobile browsers */
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Toast above bottom nav (safe-area aware) */
    .akv-toast {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Compose area — tight to bottom nav, no extra space */
    .akv-compose {
        margin-bottom: 0;
        padding-bottom: 8px;
    }
}

/* ── Text Size Classes (independent of zoom) ── */
/* Level 0: default — no override */
/* Level 1: Nagyobb (+2px on most text) */
.akv-text-1 .akv-message-text { font-size: 16px; }
.akv-text-1 .akv-compose-input { font-size: 16px; }
.akv-text-1 .akv-member-name { font-size: 16px; }
.akv-text-1 .akv-empty-text { font-size: 18px; }
.akv-text-1 .akv-empty-hint { font-size: 14px; }
.akv-text-1 .akv-message-meta { font-size: 12px; }
.akv-text-1 .akv-project-name { font-size: 15px; }
.akv-text-1 .akv-header-project-title { font-size: 18px; }
.akv-text-1 .akv-sheet-value { font-size: 15px; }
.akv-text-1 .akv-sheet-label { font-size: 12px; }

/* Level 2: Nagy (+4px on most text) */
.akv-text-2 .akv-message-text { font-size: 18px; }
.akv-text-2 .akv-compose-input { font-size: 18px; }
.akv-text-2 .akv-member-name { font-size: 18px; }
.akv-text-2 .akv-empty-text { font-size: 20px; }
.akv-text-2 .akv-empty-hint { font-size: 16px; }
.akv-text-2 .akv-message-meta { font-size: 13px; }
.akv-text-2 .akv-project-name { font-size: 17px; }
.akv-text-2 .akv-header-project-title { font-size: 20px; }
.akv-text-2 .akv-sheet-value { font-size: 17px; }
.akv-text-2 .akv-sheet-label { font-size: 13px; }

/* Level 3: Extra (+6-8px on most text) */
.akv-text-3 .akv-message-text { font-size: 20px; }
.akv-text-3 .akv-compose-input { font-size: 20px; }
.akv-text-3 .akv-member-name { font-size: 20px; }
.akv-text-3 .akv-empty-text { font-size: 22px; }
.akv-text-3 .akv-empty-hint { font-size: 18px; }
.akv-text-3 .akv-message-meta { font-size: 14px; }
.akv-text-3 .akv-project-name { font-size: 19px; }
.akv-text-3 .akv-header-project-title { font-size: 22px; }
.akv-text-3 .akv-sheet-value { font-size: 19px; }
.akv-text-3 .akv-sheet-label { font-size: 14px; }

/* ============================================================
   SECTION 26: Pairings — Fázis 5
   ============================================================ */

/* ── Pairings management section on Members tab ── */
.akv-pairings-section h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: var(--akv-text);
}

.akv-pairings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.akv-pairing-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--akv-surface, var(--akv-bg));
    border: 1px solid var(--akv-border);
    border-radius: 10px;
    flex-wrap: wrap;
}

.akv-pairing-users {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.akv-pairing-user {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-left: 3px solid var(--akv-border);
    border-radius: 6px;
    background: var(--akv-bg);
    font-size: 13px;
    font-weight: 500;
    color: var(--akv-text);
    white-space: nowrap;
}

.akv-pairing-arrow {
    font-size: 16px;
    color: var(--akv-text-muted, #888);
    flex-shrink: 0;
}

.akv-pairing-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.akv-pairing-mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.akv-pairing-mode-auto {
    background: #dcfce7;
    color: #166534;
}
[data-theme="dark"] .akv-pairing-mode-auto {
    background: #14532d;
    color: #86efac;
}

.akv-pairing-mode-mod {
    background: #fef3c7;
    color: #92400e;
}
[data-theme="dark"] .akv-pairing-mode-mod {
    background: #78350f;
    color: #fde68a;
}

.akv-pairing-pending {
    font-size: 11px;
    color: var(--akv-warning, #f59e0b);
    font-weight: 600;
    white-space: nowrap;
}

.akv-pairing-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Pairing creation form ── */
.akv-pairing-create {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.akv-pairing-create select {
    padding: 6px 10px;
    border: 1px solid var(--akv-border);
    border-radius: 8px;
    background: var(--akv-bg);
    color: var(--akv-text);
    font-size: 13px;
    min-width: 120px;
}

/* ── Paired message badges in message list ── */
.akv-paired-badge {
    background: #ede9fe !important;
    color: #5b21b6 !important;
    border-color: #c4b5fd !important;
}
[data-theme="dark"] .akv-paired-badge {
    background: #2e1065 !important;
    color: #c4b5fd !important;
    border-color: #6d28d9 !important;
}

.akv-paired-moderated {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
}
[data-theme="dark"] .akv-paired-moderated {
    background: #78350f !important;
    color: #fde68a !important;
    border-color: #b45309 !important;
}

/* ── Compose recipient select for paired users ── */
.akv-compose-select {
    padding: 6px 10px;
    border: 1px solid var(--akv-border);
    border-radius: 8px;
    background: var(--akv-bg);
    color: var(--akv-text);
    font-size: 13px;
    max-width: 220px;
    flex-shrink: 0;
}

/* ── Responsive: stack pairing cards on small screens ── */
@media (max-width: 600px) {
    .akv-pairing-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .akv-pairing-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
    .akv-pairing-create {
        flex-direction: column;
        align-items: stretch;
    }
    .akv-pairing-create select {
        width: 100%;
    }
    .akv-compose-select {
        max-width: 100%;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════
   SECTION 27: Tasks Redesign — Fázis 6
   Multi-assignee, comments, attachments, badges
   ═══════════════════════════════════════════════════════ */

/* ── Task title in list card ── */
.akv-task-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--akv-text);
    margin-bottom: 2px;
    line-height: 1.4;
}

/* ── Task meta row (badges, counts) ── */
.akv-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}

/* ── Deadline badge ── */
.akv-task-deadline-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--akv-primary-soft);
    color: var(--akv-primary);
}
.akv-task-deadline-badge.expired {
    background: var(--akv-danger-soft);
    color: var(--akv-danger);
    border: 1px solid var(--akv-danger-soft-border);
}

/* ── Revision badge ── */
.akv-task-revision-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--akv-warning-soft);
    color: var(--akv-warning-badge-text);
    border: 1px solid var(--akv-warning-soft-border);
}

/* ── Task card with revision highlight ── */
.akv-task-item.akv-task-revision {
    border-left: 3px solid var(--akv-warning);
    background: var(--akv-warning-soft);
}

/* ── Meta count badges ── */
.akv-task-assignee-count,
.akv-task-comment-count,
.akv-task-attachment-count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--akv-text-muted);
    font-weight: 500;
}

/* ── Task detail card ── */
.akv-task-detail-card {
    background: var(--akv-surface);
    border: 1px solid var(--akv-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.akv-task-detail-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--akv-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.akv-task-detail-header > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.akv-task-detail-body {
    padding: 16px 20px;
}

/* ── Task status badge ── */
.akv-task-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.akv-task-status-active {
    background: var(--akv-primary-soft);
    color: var(--akv-primary);
}
.akv-task-status-waiting {
    background: var(--akv-warning-soft);
    color: var(--akv-warning-badge-text);
}
.akv-task-status-done {
    background: rgba(34, 197, 94, 0.12);
    color: var(--akv-success);
}

/* ── Task section (assignees, comments) ── */
.akv-task-section {
    background: var(--akv-surface);
    border: 1px solid var(--akv-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
}
.akv-task-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--akv-text);
    margin-bottom: 10px;
}

/* ── Assignee row ── */
.akv-assignee-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--akv-border);
}
.akv-assignee-row:last-of-type {
    border-bottom: none;
}
.akv-assignee-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--akv-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.akv-assignee-status {
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.akv-assignee-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Thread (messenger-style comments) ── */
.akv-task-thread {
    max-height: 400px;
    overflow-y: auto;
    padding: 4px 0;
    margin-bottom: 12px;
}
.akv-thread-msg {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--akv-bg);
    border-radius: 10px;
    max-width: 85%;
    word-break: break-word;
}
.akv-thread-msg.akv-thread-own {
    margin-left: auto;
    background: var(--akv-primary-soft);
}
.akv-thread-sender {
    font-size: 11px;
    font-weight: 600;
    color: var(--akv-primary);
    margin-bottom: 2px;
}
.akv-thread-own .akv-thread-sender {
    text-align: right;
}
.akv-thread-content {
    font-size: 13px;
    color: var(--akv-text);
    line-height: 1.5;
    white-space: pre-wrap;
}
.akv-thread-att {
    margin-top: 4px;
}
.akv-thread-time {
    font-size: 10px;
    color: var(--akv-text-muted);
    margin-top: 4px;
}
.akv-thread-own .akv-thread-time {
    text-align: right;
}

/* ── Task compose area ── */
.akv-task-compose {
    padding-top: 8px;
    border-top: 1px solid var(--akv-border);
}

/* ── Button variants ── */
.akv-btn-xs {
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
    line-height: 1.3;
    cursor: pointer;
    border: none;
    font-weight: 600;
    transition: all 0.15s;
}
.akv-btn-warning {
    background: var(--akv-warning) !important;
    color: #fff !important;
}
.akv-btn-warning:hover {
    filter: brightness(0.9);
}
.akv-btn-success {
    background: var(--akv-success) !important;
    color: #fff !important;
}
.akv-btn-success:hover {
    filter: brightness(0.9);
}
.akv-btn-danger {
    background: var(--akv-danger) !important;
    color: #fff !important;
}
.akv-btn-danger:hover {
    filter: brightness(0.9);
}

/* ── Document badge ── */
.akv-badge-docs {
    background: var(--akv-info) !important;
}

/* ── Responsive: task detail on mobile ── */
@media (max-width: 600px) {
    .akv-task-detail-header {
        padding: 12px 14px;
        flex-direction: column;
    }
    .akv-task-detail-body {
        padding: 12px 14px;
    }
    .akv-task-section {
        padding: 12px 14px;
    }
    .akv-assignee-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .akv-assignee-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .akv-thread-msg {
        max-width: 90%;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* SECTION 27b: Task Assignee Picker                      */
/* ═══════════════════════════════════════════════════════ */

.akv-assign-picker {
    margin-top: 8px;
    border: 1px solid var(--akv-border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--akv-surface);
}

.akv-assign-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--akv-text-muted);
    margin-bottom: 6px;
}

.akv-assign-modes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.akv-assign-mode-btn {
    padding: 6px 12px;
    border: 1px solid var(--akv-border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--akv-bg);
    color: var(--akv-text);
    cursor: pointer;
    transition: all 0.15s;
}

.akv-assign-mode-btn:hover {
    border-color: var(--akv-primary);
    color: var(--akv-primary);
}

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

.akv-assign-step2 {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--akv-border);
}

.akv-assign-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--akv-border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--akv-bg);
    color: var(--akv-text);
}

.akv-assign-sub-options {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.akv-assign-radio {
    font-size: 12px;
    color: var(--akv-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.akv-assign-checklist {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 0;
}

.akv-assign-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--akv-text);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
}

.akv-assign-check:hover {
    background: var(--akv-hover);
}

.akv-assign-check-role {
    font-size: 10px;
    color: var(--akv-text-muted);
    margin-left: auto;
    background: var(--akv-bg);
    padding: 1px 6px;
    border-radius: 3px;
}

.akv-assign-empty {
    font-size: 12px;
    color: var(--akv-text-muted);
    font-style: italic;
    margin-top: 6px;
}

.akv-assign-hint {
    font-size: 11px;
    color: var(--akv-text-muted);
    margin-top: 6px;
    font-style: italic;
}

.akv-assign-required {
    display: none;
}

/* Responsive: stack mode buttons on very small screens */
@media (max-width: 400px) {
    .akv-assign-modes {
        flex-direction: column;
    }
    .akv-assign-sub-options {
        flex-direction: column;
        gap: 6px;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* SECTION 28: Browse Users (Member Quick-Add)            */
/* ═══════════════════════════════════════════════════════ */

.akv-browse-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.akv-browse-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--akv-border);
    border-radius: 8px;
    background: var(--akv-surface);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.akv-browse-user-card:hover {
    background: var(--akv-bg);
    border-color: var(--akv-primary, #6366f1);
}

.akv-browse-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--akv-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

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

.akv-browse-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--akv-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.akv-browse-user-email {
    font-size: 11px;
    color: var(--akv-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.akv-browse-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--akv-border);
}

@media (max-width: 600px) {
    .akv-browse-user-card {
        padding: 6px 10px;
        gap: 8px;
    }
    .akv-browse-user-avatar {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    .akv-browse-user-name {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* SECTION 29: Project Action Buttons (Delete, Duplicate) */
/* ═══════════════════════════════════════════════════════ */

.akv-action-btn {
    font-size: 12px !important;
    opacity: 0.7;
    transition: opacity .15s;
}

.akv-action-btn:hover {
    opacity: 1;
}

.akv-action-btn-danger {
    color: var(--akv-danger, #ef4444) !important;
}

.akv-action-btn-danger:hover {
    background: rgba(239, 68, 68, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════
/* SECTION 30: Export Preview (Fázis 7)                  */
/* ═══════════════════════════════════════════════════════ */

.akv-export-preview-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}

.akv-export-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.akv-export-preview-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--akv-text);
}

.akv-export-preview-actions {
    display: flex;
    gap: 8px;
}

.akv-export-preview-container {
    flex: 1;
    min-height: 0;
}

.akv-export-iframe {
    width: 100%;
    height: calc(100vh - 200px);
    border: 1px solid var(--akv-border);
    border-radius: 8px;
    background: #fff;
}

.akv-export-preview-loading {
    padding: 24px;
}

/* Responsive: smaller iframe on mobile */
@media (max-width: 768px) {
    .akv-export-preview-wrapper {
        padding: 10px;
    }

    .akv-export-preview-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .akv-export-iframe {
        height: calc(100vh - 280px);
    }

    .akv-export-preview-title {
        font-size: 14px;
    }
}

/* Dark mode: iframe border + iframe content gets body.dark class via JS */
[data-theme="dark"] .akv-export-iframe {
    border-color: var(--akv-border);
}
[data-theme="dark"] .akv-export-preview-wrapper {
    background: var(--akv-surface);
}
[data-theme="dark"] .akv-export-preview-title {
    color: var(--akv-text);
}

/* ═══════════════════════════════════════════════════════
   Fázis 8A: Invitations, Email Edit, Password Section
   ═══════════════════════════════════════════════════════ */

/* ── Invite Modal (overlay + modal card) ── */
.akv-invite-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    backdrop-filter: blur(4px);
}

.akv-invite-modal {
    background: var(--akv-surface);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: akv-modalPop 0.2s ease-out;
    overflow: hidden;
}

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

.akv-invite-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--akv-text-muted);
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.akv-invite-close:hover {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

.akv-invite-modal-body {
    padding: 20px;
}

.akv-invite-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--akv-border);
}

/* ── Invitation Cards ── */
.akv-invitations-section {
    /* base styles set inline in JS */
}

.akv-invitation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--akv-surface);
    border: 1px solid var(--akv-border);
    border-radius: 10px;
    margin-bottom: 6px;
    transition: box-shadow 0.15s;
}
.akv-invitation-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

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

.akv-inv-email {
    font-size: 13px;
    font-weight: 600;
    color: var(--akv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.akv-inv-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.akv-inv-role-badge {
    font-size: 11px;
    font-weight: 600;
}

.akv-inv-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}
.akv-inv-pending {
    background: rgba(245,158,11,0.12);
    color: #d97706;
}
.akv-inv-accepted {
    background: rgba(34,197,94,0.12);
    color: #16a34a;
}
.akv-inv-expired {
    background: rgba(239,68,68,0.12);
    color: #dc2626;
}
.akv-inv-cancelled {
    background: rgba(156,163,175,0.12);
    color: #6b7280;
}

.akv-inv-date {
    font-size: 11px;
    color: var(--akv-text-muted);
}

.akv-inv-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Email Inline Edit (member cards) ── */
.akv-member-email-row .akv-email-edit-btn {
    transition: opacity 0.15s;
}
.akv-member-email-row:hover .akv-email-edit-btn {
    opacity: 1 !important;
}

.akv-email-edit-input {
    transition: border-color 0.15s;
}
.akv-email-edit-input:focus {
    outline: none;
    border-color: var(--akv-primary, #6366f1) !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

/* ── Password Section (profile modal) ── */
.akv-password-section {
    /* Inherits from akv-profile-section */
}

.akv-password-form .akv-profile-field-row {
    margin-bottom: 8px;
}
.akv-password-form .akv-profile-field-row label {
    font-size: 12px;
    font-weight: 500;
    color: var(--akv-text-muted);
    display: block;
    margin-bottom: 3px;
}
.akv-password-form .akv-profile-field-row input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--akv-border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--akv-surface);
    color: var(--akv-text);
    box-sizing: border-box;
}
.akv-password-form .akv-profile-field-row input:focus {
    outline: none;
    border-color: var(--akv-primary, #6366f1);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

/* ── Dark mode support for Fázis 8A ── */
[data-theme="dark"] .akv-invite-overlay {
    background: rgba(0,0,0,0.7);
}
[data-theme="dark"] .akv-invitation-card {
    background: var(--akv-bg);
}
[data-theme="dark"] .akv-inv-pending {
    background: rgba(245,158,11,0.18);
    color: #fbbf24;
}
[data-theme="dark"] .akv-inv-accepted {
    background: rgba(34,197,94,0.18);
    color: #4ade80;
}
[data-theme="dark"] .akv-inv-expired {
    background: rgba(239,68,68,0.18);
    color: #f87171;
}
[data-theme="dark"] .akv-inv-cancelled {
    background: rgba(156,163,175,0.18);
    color: #9ca3af;
}

/* ── Mobile responsive for invite modal ── */
@media (max-width: 480px) {
    .akv-invite-modal {
        max-width: 100%;
        border-radius: 12px;
    }
    .akv-invite-modal-body {
        padding: 16px;
    }
    .akv-invitation-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .akv-inv-actions {
        align-self: flex-end;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* SECTION 31: Dashboard — Fázis 8B                      */
/* ═══════════════════════════════════════════════════════ */

.akv-dashboard {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Widget base ── */
.akv-dashboard-widget {
    background: var(--akv-card-bg, #fff);
    border: 1px solid var(--akv-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}
.akv-dashboard-widget-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 14px 0;
    color: var(--akv-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Widget 1: Stats grid ── */
.akv-dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.akv-dashboard-stat {
    text-align: center;
    padding: 14px 8px;
    border-radius: 10px;
    background: var(--akv-bg);
    border: 1px solid var(--akv-border);
    transition: transform 0.15s;
}
.akv-dashboard-stat-clickable {
    cursor: pointer;
}
.akv-dashboard-stat-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.akv-dashboard-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--akv-text);
}
.akv-dashboard-stat-label {
    display: block;
    font-size: 12px;
    color: var(--akv-text-muted, #888);
    margin-top: 4px;
}
.akv-dashboard-stat-warn {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}
.akv-dashboard-stat-warn .akv-dashboard-stat-value {
    color: #d97706;
}
.akv-dashboard-stat-danger {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
.akv-dashboard-stat-danger .akv-dashboard-stat-value {
    color: #dc2626;
}
.akv-dashboard-stat-info {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.06);
}
.akv-dashboard-stat-info .akv-dashboard-stat-value {
    color: #2563eb;
}

/* ── Dashboard 2-column grid ── */
.akv-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* ── Widget 2: Action items ── */
.akv-action-items-list {
    max-height: 320px;
    overflow-y: auto;
}
.akv-action-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--akv-bg);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.akv-action-item-clickable {
    cursor: pointer;
}
.akv-action-item-clickable:hover {
    background: var(--akv-hover-bg, #f3f4f6);
    border-color: var(--akv-border);
}
.akv-action-item-danger {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.04);
}
.akv-action-item-icon {
    flex-shrink: 0;
    font-size: 16px;
    margin-top: 2px;
}
.akv-action-item-content {
    flex: 1;
    font-size: 13px;
    color: var(--akv-text);
    line-height: 1.4;
}
.akv-action-item-content strong {
    font-weight: 600;
}
.akv-action-item-time {
    display: inline-block;
    font-size: 11px;
    color: var(--akv-text-muted, #888);
    margin-left: 6px;
}

/* ── Widget 3: Activity list ── */
.akv-activity-list {
    max-height: 320px;
    overflow-y: auto;
}
.akv-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--akv-border);
}
.akv-activity-item:last-child {
    border-bottom: none;
}
.akv-activity-icon {
    flex-shrink: 0;
    font-size: 15px;
    margin-top: 2px;
}
.akv-activity-content {
    flex: 1;
    font-size: 13px;
    color: var(--akv-text);
    line-height: 1.4;
}
.akv-activity-content strong {
    font-weight: 600;
}
.akv-activity-time {
    display: inline-block;
    font-size: 11px;
    color: var(--akv-text-muted, #888);
    margin-left: 6px;
}

/* ── Widget 4: Member status ── */
.akv-dashboard-member-list {
    max-height: 400px;
    overflow-y: auto;
}
.akv-dashboard-member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.akv-dashboard-member-card:hover {
    background: var(--akv-hover-bg, #f3f4f6);
}
.akv-dashboard-member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.akv-dashboard-member-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--akv-primary, #7c3aed);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}
.akv-dashboard-member-info {
    flex: 1;
    min-width: 0;
}
.akv-dashboard-member-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--akv-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.akv-dashboard-member-role {
    display: block;
    font-size: 11px;
    color: var(--akv-text-muted, #888);
}
.akv-dashboard-member-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.akv-member-status-dot {
    font-size: 12px;
}
.akv-dashboard-member-activity {
    font-size: 11px;
    color: var(--akv-text-muted, #888);
    white-space: nowrap;
}

/* ── Empty state ── */
.akv-dashboard-empty {
    text-align: center;
    padding: 20px;
    color: var(--akv-text-muted, #888);
    font-size: 13px;
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .akv-dashboard-stat {
    background: var(--akv-bg);
    border-color: var(--akv-border);
}
[data-theme="dark"] .akv-dashboard-stat-warn {
    background: rgba(245, 158, 11, 0.12);
}
[data-theme="dark"] .akv-dashboard-stat-danger {
    background: rgba(239, 68, 68, 0.12);
}
[data-theme="dark"] .akv-dashboard-stat-info {
    background: rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .akv-action-item-clickable:hover {
    background: var(--akv-hover-bg, #2a2a2a);
}
[data-theme="dark"] .akv-action-item-danger {
    background: rgba(239, 68, 68, 0.08);
}
[data-theme="dark"] .akv-dashboard-member-card:hover {
    background: var(--akv-hover-bg, #2a2a2a);
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .akv-dashboard {
        padding: 12px;
    }
    .akv-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .akv-dashboard-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .akv-dashboard-widget {
        padding: 14px;
    }
}
@media (max-width: 480px) {
    .akv-dashboard-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .akv-dashboard-stat-value {
        font-size: 22px;
    }
    .akv-dashboard-stat {
        padding: 10px 6px;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* SECTION 32: Login Log — Fázis 8C                      */
/* ═══════════════════════════════════════════════════════ */

/* Last login badge on member cards */
.akv-last-login {
    margin-top: 6px;
    font-size: 11px;
    color: var(--akv-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
}
.akv-last-login-never {
    color: var(--akv-danger, #ef4444);
    font-style: italic;
    font-size: 10px;
}

/* Dashboard member login info */
.akv-dashboard-member-login-info {
    font-size: 10px;
    color: var(--akv-text-muted);
    margin-top: 2px;
    display: block;
}

/* Login history section in profile modal */
.akv-login-history-section {
    /* inherits from .akv-profile-section */
}

.akv-login-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.akv-login-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--akv-bg);
    border: 1px solid var(--akv-border);
    font-size: 12px;
    gap: 8px;
    transition: background 0.15s;
}
.akv-login-entry:hover {
    background: var(--akv-surface-hover, var(--akv-surface));
}

.akv-login-entry-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.akv-device-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.akv-login-entry-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.akv-login-entry-time {
    font-weight: 500;
    color: var(--akv-text);
    font-size: 12px;
}

.akv-login-entry-details {
    font-size: 11px;
    color: var(--akv-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.akv-login-entry-ip {
    font-size: 10px;
    color: var(--akv-text-muted);
    font-family: monospace;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Dark mode adjustments */
[data-theme="dark"] .akv-login-entry {
    background: var(--akv-surface);
    border-color: var(--akv-border);
}
[data-theme="dark"] .akv-login-entry:hover {
    background: var(--akv-bg);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .akv-login-entry {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .akv-login-entry-ip {
        font-size: 9px;
        align-self: flex-end;
    }
    .akv-last-login {
        font-size: 10px;
    }
}