/* ===================================================
   AkoPlus — Premium Mobile Task Manager Stylesheet
   Bootstrap 5 + Custom Design System
   =================================================== */

:root {
    --ako-primary: #4F46E5;
    --ako-primary-light: #818CF8;
    --ako-primary-dark: #3730A3;
    --ako-purple: #7C3AED;
    --ako-accent: #06B6D4;
    --ako-success: #10B981;
    --ako-warning: #F59E0B;
    --ako-danger: #EF4444;
    --ako-bg: #F1F5F9;
    --ako-surface: #FFFFFF;
    --ako-text: #0F172A;
    --ako-text-secondary: #64748B;
    --ako-border: #E2E8F0;
    --ako-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #06B6D4 100%);
    --ako-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    --ako-shadow-lg: 0 8px 40px rgba(15, 23, 42, 0.12);
    --ako-radius: 16px;
    --ako-radius-sm: 10px;
    --ako-hover: #EEF2FF;
    --ako-card-bg: #FFFFFF;
    --ako-text-primary: #0F172A;
    --card-bg: #FFFFFF;
    --soft-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);

    /* Button design tokens */
    --ako-btn-radius: 50rem;
    --ako-btn-padding-y: 0.4rem;
    --ako-btn-padding-x: 0.85rem;
    --ako-btn-font-size: 0.82rem;
    --ako-btn-sm-padding-y: 0.28rem;
    --ako-btn-sm-padding-x: 0.6rem;
    --ako-btn-sm-font-size: 0.76rem;
    --ako-btn-icon-size: 32px;
}

/* ===== REUSABLE COMPONENTS ===== */

/* Solid gradient primary button */
.ako-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    background: var(--ako-gradient);
    color: #fff;
    border: none;
    border-radius: var(--ako-btn-radius);
    padding: var(--ako-btn-padding-y) var(--ako-btn-padding-x);
    font-size: var(--ako-btn-font-size);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.ako-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    color: #fff;
}
.ako-btn:active { transform: translateY(0); }
.ako-btn:disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Outline secondary button */
.ako-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    background: transparent;
    border: 1.5px solid var(--ako-border);
    color: var(--ako-text);
    border-radius: var(--ako-btn-radius);
    padding: var(--ako-btn-padding-y) var(--ako-btn-padding-x);
    font-size: var(--ako-btn-font-size);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    text-decoration: none;
}
.ako-btn-outline:hover {
    background: var(--ako-hover);
    border-color: var(--ako-primary);
    color: var(--ako-primary);
}
.ako-btn-outline:active { background: rgba(79, 70, 229, 0.1); }
.ako-btn-outline:disabled {
    opacity: 0.45;
    pointer-events: none;
}
/* Outline color modifiers */
.ako-btn-outline.primary { border-color: var(--ako-primary); color: var(--ako-primary); }
.ako-btn-outline.primary:hover { background: rgba(79, 70, 229, 0.08); }
.ako-btn-outline.danger { border-color: var(--ako-danger); color: var(--ako-danger); }
.ako-btn-outline.danger:hover { background: rgba(239, 68, 68, 0.08); }
.ako-btn-outline.success { border-color: var(--ako-success); color: var(--ako-success); }
.ako-btn-outline.success:hover { background: rgba(16, 185, 129, 0.08); }
.ako-btn-outline.warning { border-color: var(--ako-warning); color: var(--ako-warning); }
.ako-btn-outline.warning:hover { background: rgba(245, 158, 11, 0.08); }
.ako-btn-outline.accent { border-color: var(--ako-accent); color: var(--ako-accent); }
.ako-btn-outline.accent:hover { background: rgba(6, 182, 212, 0.08); }

/* Compact icon-only circle button */
.ako-btn-icon {
    width: var(--ako-btn-icon-size);
    height: var(--ako-btn-icon-size);
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border: 1.5px solid var(--ako-border);
    background: transparent;
    color: var(--ako-text-secondary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}
.ako-btn-icon:hover { background: var(--ako-hover); border-color: var(--ako-primary); color: var(--ako-primary); }
/* Icon color modifiers */
.ako-btn-icon.primary:hover { background: rgba(79, 70, 229, 0.08); border-color: var(--ako-primary); color: var(--ako-primary); }
.ako-btn-icon.danger:hover { background: rgba(239, 68, 68, 0.08); border-color: var(--ako-danger); color: var(--ako-danger); }
.ako-btn-icon.success:hover { background: rgba(16, 185, 129, 0.08); border-color: var(--ako-success); color: var(--ako-success); }
.ako-btn-icon.warning:hover { background: rgba(245, 158, 11, 0.08); border-color: var(--ako-warning); color: var(--ako-warning); }
.ako-btn-icon.accent:hover { background: rgba(6, 182, 212, 0.08); border-color: var(--ako-accent); color: var(--ako-accent); }

/* Tab pill toggle */
.ako-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3rem 0.8rem;
    border-radius: var(--ako-btn-radius);
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--ako-bg);
    border: 1px solid var(--ako-border);
    color: var(--ako-text-secondary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.ako-tab-pill:hover { background: var(--ako-hover); color: var(--ako-text); }
.ako-tab-pill.active {
    background: var(--ako-primary);
    border-color: var(--ako-primary);
    color: #fff;
}

/* Shared view header row */
.ako-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
}
.ako-header-row h4 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
}
.ako-header-row .ako-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .ako-header-row { gap: 8px; }
    .ako-header-row h4 { font-size: 1.15rem; }
    .ako-header-row .ako-header-actions { gap: 6px; }
}


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

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--ako-bg);
    color: var(--ako-text);
    overflow: hidden;
    height: 100dvh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* ===== LOGIN ===== */
.login-page {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ako-gradient);
    position: relative;
    overflow: hidden;
}

.login-decoration { position: absolute; inset: 0; pointer-events: none; }
.deco-circle { position: absolute; border-radius: 50%; opacity: 0.1; background: white; }
.deco-1 { width: 400px; height: 400px; top: -100px; right: -100px; }
.deco-2 { width: 300px; height: 300px; bottom: -50px; left: -80px; }
.deco-3 { width: 200px; height: 200px; top: 40%; left: 60%; opacity: 0.06; }

.login-wrapper { position: relative; z-index: 2; width: 100%; max-width: 420px; padding: 20px; }
.login-card { background: var(--ako-surface); border-radius: 24px; padding: 40px 32px; box-shadow: var(--ako-shadow-lg); }
.login-brand { text-align: center; margin-bottom: 32px; }
.brand-icon { width: 64px; height: 64px; background: var(--ako-gradient); border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.brand-icon i { font-size: 32px; color: white; }
.login-brand h1 { font-size: 1.8rem; font-weight: 800; background: var(--ako-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-brand p { font-size: 0.9rem; margin-top: 4px; }

.login-form .form-control { border: 1.5px solid var(--ako-border); border-radius: var(--ako-radius-sm); font-size: 0.95rem; padding: 14px 16px; height: auto; transition: border-color 0.2s, box-shadow 0.2s; }
.login-form .form-control:focus { border-color: var(--ako-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.login-form .form-floating label { color: var(--ako-text-secondary); }

.btn-login { padding: 14px; border-radius: var(--ako-radius-sm); font-size: 1rem; font-weight: 700; background: var(--ako-gradient); border: none; letter-spacing: 0.3px; transition: transform 0.2s, box-shadow 0.2s; }
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35); }
.login-footer { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ako-border); }

/* ===== APP SHELL ===== */
.app-shell { display: flex; flex-direction: column; height: 100dvh; max-width: 480px; margin: 0 auto; background: var(--ako-bg); position: relative; box-shadow: -1px 0 40px rgba(0,0,0,0.06), 1px 0 40px rgba(0,0,0,0.06); overflow: hidden; }
.app-shell > main { overflow-x: hidden; max-width: 100%; }
.app-topbar { background: var(--ako-gradient); padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); display: flex; justify-content: space-between; align-items: center; z-index: 10; min-height: 48px; flex-shrink: 0; }

/* Nav Strip wrapper — adds scroll fade indicators on mobile */
.app-nav-strip-wrap {
    position: relative;
    flex-shrink: 0;
    z-index: 10;
    background: var(--ako-gradient);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.app-nav-strip-wrap::after {
    content: '';
    display: none; /* shown on mobile via media query */
}

/* Nav Strip - icon row below topbar (scrollable on all screen sizes) */
.app-nav-strip {
    background: transparent;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 8px 10px;
    flex-shrink: 0;
    z-index: 10;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
    gap: 2px;
    cursor: grab;
}
.app-nav-strip.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}
.app-nav-strip::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

/* Right-side fade scroll indicator */
.app-nav-strip-wrap::after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(79, 70, 229, 0.85));
    pointer-events: none;
    z-index: 11;
    transition: opacity 0.25s;
}
.app-nav-strip-wrap.scrolled-end::after {
    opacity: 0;
}

/* Mobile: tighter padding */
@media (max-width: 576px) {
    .app-nav-strip {
        padding: 4px 6px 10px;
    }
    .nav-strip-btn {
        min-width: 52px;
        padding: 4px 8px;
    }
}

.nav-strip-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.15rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 10px;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}

.nav-strip-btn span {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.nav-strip-btn.active {
    color: white;
    background: rgba(255,255,255,0.15);
}

.nav-strip-btn:hover {
    color: white;
    background: rgba(255,255,255,0.1);
}
.topbar-left { display: flex; align-items: center; }
.brand-sm { color: white; font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; line-height: 1; }
.brand-sm i { font-size: 1.3rem; }
.brand-sm i { font-size: 1.3rem; }
.topbar-right { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.topbar-right .btn-outline-light { font-size: 0.78rem; font-weight: 600; border-width: 1.5px; height: 36px; display: inline-flex; align-items: center; padding: 0 14px; }

/* Logout icon button */
.logout-btn {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.3);
}
.logout-btn:hover {
    background: rgba(239,68,68,0.3);
    color: white;
    border-color: rgba(239,68,68,0.5);
}

/* Date Strip */
#dayViewControls { flex-shrink: 0; }
.date-strip { background: var(--ako-surface); padding: 16px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ako-border); flex-shrink: 0; }
.date-nav-btn { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--ako-border); background: var(--ako-surface); color: var(--ako-text); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; }
.date-nav-btn:hover { background: var(--ako-primary); color: white; border-color: var(--ako-primary); }
.date-center { text-align: center; flex: 1; }
.date-label { font-size: 1.25rem; font-weight: 800; }
.date-full { font-size: 0.78rem; color: var(--ako-text-secondary); margin-top: 2px; }

/* Progress */
.progress-strip { background: var(--ako-surface); padding: 10px 0; border-bottom: 1px solid var(--ako-border); flex-shrink: 0; }
.progress-count { font-size: 0.8rem; font-weight: 600; color: var(--ako-text-secondary); white-space: nowrap; }
.progress-pct { font-size: 0.8rem; font-weight: 700; color: var(--ako-success); white-space: nowrap; transition: color 0.3s; }
.progress-pct.complete { color: #10b981; text-shadow: 0 0 8px rgba(16,185,129,0.4); }
.progress { border-radius: 10px; background: var(--ako-border); overflow: hidden; }
.progress-bar {
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(90deg, var(--ako-primary), #8b5cf6, var(--ako-primary));
    background-size: 200% 100%;
    animation: progressShimmer 2s ease infinite;
    position: relative;
}
@keyframes progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Task Area */
/* Bulk Action Bar */
.bulk-action-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #1a1a2e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.bulk-selected-count {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.bulk-action-btns {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
/* Bulk select mode — show checkboxes on task rows */
.bulk-select-mode .task-item .drag-handle { display: none !important; }
.task-select-checkbox {
    display: none;
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    cursor: pointer;
    accent-color: var(--ako-primary);
    flex-shrink: 0;
    align-self: center;
}
.bulk-select-mode .task-select-checkbox { display: block; }
.task-item.bulk-selected { background: rgba(99,102,241,0.08) !important; }

/* Task Area */
.task-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 12px;
    padding-bottom: 24px;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ===== TASK CARD — Clean List Design ===== */
.task-item {
    background: var(--ako-surface);
    margin: 0 12px;
    padding: 0;
    border-bottom: 1px solid var(--ako-border);
    transition: background 0.15s;
    animation: slideUp 0.25s ease forwards;
    overflow: hidden;
    position: relative;
}

.task-item:last-child { border-bottom: none; }
.task-item:hover { background: rgba(79, 70, 229, 0.015); }
.task-item:active { background: rgba(79, 70, 229, 0.04); }

/* Completion slide-out animation */
.task-item.completing {
    animation: taskComplete 0.5s ease forwards;
}
@keyframes taskComplete {
    0% { opacity: 1; transform: translateX(0); }
    40% { opacity: 1; transform: translateX(8px); background: rgba(16,185,129,0.06); }
    100% { opacity: 0; transform: translateX(30px); max-height: 0; padding: 0; margin: 0; border: none; overflow: hidden; }
}

/* Reopening slide-in */
.task-item.reopening {
    animation: taskReopen 0.4s ease forwards;
}
@keyframes taskReopen {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* High priority warm glow */
.task-item.priority-high {
    background: linear-gradient(90deg, rgba(239,68,68,0.03) 0%, transparent 40%);
}
.task-item.priority-high:hover {
    background: linear-gradient(90deg, rgba(239,68,68,0.06) 0%, rgba(79,70,229,0.015) 40%);
}

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

.task-main {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
}

.task-check {
    width: 20px; height: 20px;
    border: 2px solid var(--ako-border);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.task-check:hover {
    border-color: var(--ako-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
    transform: scale(1.08);
}
.task-check.done {
    background: var(--ako-success);
    border-color: var(--ako-success);
    color: white;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.task-check.done:not(.no-anim) {
    animation: checkPop 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes checkPop {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
    30% { transform: scale(1.3); box-shadow: 0 0 0 8px rgba(16,185,129,0.15); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
}

.task-body { flex: 1; min-width: 0; }
.task-text {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ako-text);
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-item.completed .task-text {
    text-decoration: line-through;
    color: var(--ako-text-secondary);
    font-weight: 400;
}

/* ===== MONTAGE STUDIO ===== */
.montage-area, .montage-detail-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 90px;
}

/* Step-based workflow */
.montage-step {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.montage-step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.montage-step-header.montage-step-toggle { cursor: pointer; }
.montage-step-header.montage-step-toggle:hover { background: #f1f5f9; }
.montage-step-number {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.montage-step-label { font-weight: 600; font-size: 0.95rem; color: #1e293b; }
.montage-step-chevron { transition: transform 0.2s; color: #94a3b8; }
.montage-step-header.collapsed .montage-step-chevron { transform: rotate(-90deg); }
.montage-step-body { padding: 14px 16px; }
.montage-step-body.collapsed-body { display: none; }

/* Upload zone */
.montage-upload-zone {
    border: 2px dashed #c7d2fe;
    border-radius: 12px;
    background: #eef2ff;
    padding: 24px 16px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}
.montage-upload-zone:hover, .montage-upload-zone.drag-over {
    border-color: #6366f1;
    background: #e0e7ff;
}

/* Generate actions */
.montage-generate-actions { margin-top: 4px; }

#montagePreviewControls .btn {
    min-width: 2.25rem;
}

#montageRenderQualityRow {
    flex-wrap: wrap;
}

#montageRenderQuality {
    min-width: 9.5rem;
}

.montage-generate-actions .btn,
#montageAiToolsBody .btn,
#montageWizardModal .btn {
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#montagePostGenerateActions .d-flex {
    width: 100%;
}

#montagePostGenerateActions .btn {
    flex: 1 1 calc(50% - 0.5rem);
    text-align: center;
}

.montage-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    cursor: pointer;
}

.montage-card:hover {
    border-color: #cbd5e1;
}

.montage-card-row {
    min-width: 0;
}

.montage-card-content {
    min-width: 0;
}

.montage-card-title {
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.montage-card-meta {
    margin-top: 1px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.montage-card-badges {
    min-width: 0;
    max-width: 100%;
}

.montage-card-badges .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.montage-card-chevron {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .montage-card-title,
    .montage-card-meta {
        max-width: 100%;
    }

    .montage-card-badges .badge {
        max-width: 140px;
    }
}

.montage-player-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px;
    background: #0f172a;
    position: relative;
    overflow: hidden;
}

.montage-autocut-controls {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
}

.montage-autocut-controls .form-select {
    max-width: 180px;
}

.montage-autocut-presets .btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

.montage-autocut-presets .btn.active {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.montage-tour-target {
    position: relative;
    z-index: 10051;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.32);
    border-radius: 8px;
}

.montage-tour-bubble {
    position: fixed;
    z-index: 10060;
    width: min(320px, calc(100vw - 20px));
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.45);
}

.montage-tour-head {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #67e8f9;
    margin-bottom: 3px;
}

.montage-tour-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 3px;
}

.montage-tour-body {
    font-size: 0.8rem;
    line-height: 1.35;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.montage-tour-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* Story-style segmented progress bar */
.montage-progress-bar {
    display: flex;
    gap: 3px;
    padding: 6px 4px 4px;
}

.montage-progress-seg {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.montage-progress-seg.done {
    background: rgba(255, 255, 255, 0.85);
}

.montage-progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
}

/* Aspect ratio containers */
.montage-player-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background: #111827;
}

.montage-ratio-9-16 {
    max-width: 280px;
    aspect-ratio: 9 / 16;
}

.montage-ratio-1-1 {
    max-width: 360px;
    aspect-ratio: 1 / 1;
}

.montage-ratio-4-5 {
    max-width: 320px;
    aspect-ratio: 4 / 5;
}

.montage-ratio-16-9 {
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

/* Player core */
.montage-player {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.montage-player img,
.montage-player video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* Caption overlay */
.montage-caption-overlay {
    position: absolute;
    left: 0;
    right: 0;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 5;
}

.montage-caption-top {
    top: 40px;
}

.montage-caption-center {
    top: 50%;
    transform: translateY(-50%);
}

.montage-caption-bottom {
    bottom: 16px;
}

.montage-caption-preset-subtitle {
    background: rgba(0, 0, 0, 0.55);
    border-radius: 10px;
    margin: 0 auto;
    max-width: calc(100% - 24px);
}

.montage-caption-preset-minimal {
    background: transparent;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.montage-caption-preset-bold-center {
    font-size: 1.15rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    margin: 0 auto;
    max-width: calc(100% - 24px);
}

/* Transition animations */
.montage-enter-fade {
    animation: montageFadeIn 1.2s ease forwards;
}

.montage-enter-dissolve {
    animation: montageDissolveIn 1.2s ease forwards;
}

.montage-enter-wipe-right {
    animation: montageWipeRightIn 1.2s ease forwards;
}

.montage-enter-slide-left {
    animation: montageSlideLeftIn 1.2s ease forwards;
}

.montage-enter-slide-right {
    animation: montageSlideRightIn 1.2s ease forwards;
}

.montage-enter-slide-up {
    animation: montageSlideUpIn 1.2s ease forwards;
}

.montage-enter-slide-down {
    animation: montageSlideDownIn 1.2s ease forwards;
}

.montage-enter-zoom-in {
    animation: montageZoomIn 1.2s ease forwards;
}

.montage-enter-zoom-out {
    animation: montageZoomOut 1.2s ease forwards;
}

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

@keyframes montageDissolveIn {
    from { opacity: 0; filter: blur(5px); }
    to { opacity: 1; filter: blur(0); }
}

@keyframes montageWipeRightIn {
    from { clip-path: inset(0 100% 0 0); opacity: 0.8; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

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

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

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

@keyframes montageSlideDownIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes montageZoomIn {
    from { transform: scale(1.15); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes montageZoomOut {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Fullscreen mode */
.montage-player-container:fullscreen {
    max-width: none;
    border-radius: 0;
    background: #000;
}

.montage-player-container:fullscreen .montage-player {
    max-height: 100vh;
}

.montage-player-container:fullscreen .montage-caption-overlay {
    font-size: 1.5rem;
    padding: 20px 30px;
}

/* Slide editor row */
.montage-slide-editor {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 8px 10px;
    margin-top: -8px;
    margin-bottom: 8px;
}

/* Video export progress */
.montage-video-progress {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 10px 12px;
}

/* Media list */
.montage-media-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.montage-media-list.touch-sort-active {
    -webkit-user-select: none;
    user-select: none;
}

.montage-media-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 8px 10px;
    transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
    cursor: pointer;
}

.montage-media-meta {
    min-width: 0;
    flex: 1;
}

.montage-media-row.drag-over {
    border-color: var(--ako-primary);
    background: var(--ako-hover);
}

.montage-media-row.dragging {
    opacity: 0.55;
}

.montage-media-row.touch-dragging {
    opacity: 0.65;
    border-color: #2563eb;
    background: #dbeafe;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.montage-drag-handle {
    cursor: grab;
    color: #64748b;
}

.montage-drag-handle:active {
    cursor: grabbing;
}

@media (max-width: 480px) {
    .montage-ratio-9-16 {
        max-width: 220px;
    }
    .montage-ratio-1-1 {
        max-width: 280px;
    }
    .montage-ratio-4-5 {
        max-width: 260px;
    }

    .montage-autocut-controls .form-select {
        max-width: 132px;
    }

    .montage-autocut-presets .btn {
        font-size: 0.72rem;
        padding: 0.18rem 0.52rem;
    }

    .montage-tour-bubble {
        width: min(300px, calc(100vw - 14px));
    }

    #montageAiToolsBody .pt-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    #montagePreviewControls {
        display: grid !important;
        grid-template-columns: 1fr 1.4fr 1fr 1fr;
        gap: 0.45rem;
        align-items: stretch;
    }

    #montagePreviewControls .btn {
        width: 100%;
        min-height: 2.25rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    #montageRenderQualityRow {
        justify-content: space-between;
    }

    #montageRenderQuality {
        width: 100%;
        min-width: 0;
    }

    #montageAiToolsBody .pt-2 .btn {
        width: 100%;
        min-height: 2.2rem;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    #montagePostGenerateActions .d-flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    #montagePostGenerateActions .btn {
        width: 100%;
        min-height: 2.2rem;
        margin: 0;
    }

    #montageWizardDurationPresets {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    #montageWizardDurationPresets .btn {
        width: 100%;
        min-height: 2.2rem;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    #montageWizardModal .modal-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    #montageWizardBackBtn {
        width: 100%;
    }

    #montageWizardModal .modal-footer > .d-flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    #montageWizardModal .modal-footer > .d-flex .btn {
        width: 100%;
        min-height: 2.2rem;
    }

    #montageWizardRecordWrap > .d-flex {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 0.5rem !important;
    }

    #montageWizardRecordBtn {
        width: 100%;
    }

    #montageWizardRecordStatus {
        width: 100%;
        word-break: break-word;
    }
}

@media (max-width: 360px) {
    #montageAiToolsBody .pt-2,
    #montagePostGenerateActions .d-flex,
    #montageWizardModal .modal-footer > .d-flex {
        grid-template-columns: 1fr;
    }

    #montageGenerateBody .btn {
        font-size: 0.78rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    #montagePreviewControls {
        grid-template-columns: 1fr 1fr;
    }

    #montagePlayBtn {
        grid-column: span 2;
    }

    #montageWizardDurationPresets {
        grid-template-columns: 1fr;
    }

    #montageWizardStepLabel,
    #montageWizardStatus {
        line-height: 1.35;
    }
}

@media (max-width: 320px) {
    #montageGenerateBody .btn,
    #montageWizardModal .btn,
    #montageAiToolsBody .btn {
        font-size: 0.74rem;
    }

    #montageWizardModal .modal-body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Montage card thumbnail */
.montage-card-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}

.montage-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.montage-card-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.3rem;
}

/* Montage music bar */
.montage-music-bar {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 8px 12px;
}

.montage-music-bar .form-range {
    width: 100px;
}

/* Montage voice-over bar */
.montage-voiceover-bar {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 1px solid #f87171;
    border-radius: 10px;
    padding: 8px 12px;
}
.montage-voiceover-bar .form-range {
    width: 100px;
}

/* Montage music library panel */
.montage-music-library-panel {
    background: linear-gradient(135deg, #fef9c3, #fde68a);
    border: 1px solid #fbbf24;
    border-radius: 12px;
    padding: 12px;
}
.montage-music-library-list .ml-track-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.montage-music-library-list .ml-track-row:hover {
    background: rgba(251,191,36,.15);
}
.montage-music-library-list .ml-track-row.active {
    background: rgba(251,191,36,.25);
    font-weight: 600;
}

/* Voice-over transcript caption overlay */
.montage-voiceover-caption {
    position: absolute;
    bottom: 8%;
    left: 5%;
    right: 5%;
    text-align: center;
    pointer-events: none;
    z-index: 15;
    padding: 6px 14px;
    background: rgba(0,0,0,0.6);
    border-radius: 8px;
    font-size: 1rem;
    color: #fff;
    line-height: 1.4;
    font-family: Arial, Helvetica, sans-serif;
}
.montage-voiceover-caption .vo-word-active {
    color: #facc15;
    font-weight: 700;
}
.montage-player-container:fullscreen .montage-voiceover-caption {
    font-size: 2rem;
    bottom: 5%;
    padding: 12px 24px;
}

/* Montage share bar */
.montage-share-bar .form-control[readonly] {
    background: #f8fafc;
    font-size: 0.82rem;
}

/* Time shown right-aligned on the main row */
.task-time-right {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ako-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Subtle meta line under title */
.task-meta-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--ako-text-secondary);
    font-weight: 400;
    line-height: 1.3;
}
.task-meta-inline .meta-sep {
    opacity: 0.4;
}
.task-meta-inline .meta-priority-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.task-meta-inline .meta-cat-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.task-meta-inline .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.task-meta-inline .meta-item i {
    font-size: 0.65rem;
    opacity: 0.7;
}

.task-time-hint {
    font-size: 0.72rem;
    color: var(--ako-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

.task-expand-chevron {
    font-size: 0.7rem;
    color: var(--ako-text-secondary);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.15s;
    padding: 6px;
    opacity: 0.35;
}
.task-item:hover .task-expand-chevron { opacity: 1; }
@media (hover: none) { .task-expand-chevron { opacity: 0.6; } }
.task-item.expanded .task-expand-chevron {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--ako-primary);
}

/* Expanded card subtle elevation */
.task-item.expanded {
    background: var(--ako-surface);
    box-shadow: 0 2px 12px rgba(79,70,229,0.06);
    z-index: 2;
    position: relative;
    border-radius: 10px;
    margin: 4px 12px;
    border-bottom: none;
}
.task-item.expanded + .task-item { border-top: none; }

/* Expandable detail panel */
.task-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
    padding: 0 14px 0 44px;
}
.task-item.expanded .task-detail {
    max-height: 800px;
    padding: 4px 14px 12px 44px;
    border-top: 1px solid rgba(79,70,229,0.06);
}

.task-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    width: 100%;
    min-width: 0;
}

.task-detail-notes {
    font-size: 0.8rem;
    color: var(--ako-text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    background: var(--ako-bg);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
}

.task-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.task-meta-tag {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--ako-text-secondary);
    background: var(--ako-bg);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-meta-tag i { font-size: 0.7rem; }
.task-meta-tag.time-tag { color: var(--ako-primary); background: rgba(79,70,229,0.08); }
.task-meta-tag.notes-tag { color: var(--ako-purple); background: rgba(124,58,237,0.08); }
.task-meta-tag.checklist-tag { color: var(--ako-accent); background: rgba(6,182,212,0.08); }

.task-actions { display: flex; gap: 2px; flex-shrink: 0; }
.task-actions .btn { width: 30px; height: 30px; border-radius: 8px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; border: none; }
.task-edit-btn { background: rgba(79, 70, 229, 0.08); color: var(--ako-primary); }
.task-del-btn { background: rgba(239, 68, 68, 0.08); color: var(--ako-danger); }

/* Action buttons inside expanded detail */
.task-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ako-border);
}
.task-detail-actions .btn {
    flex: 1;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.task-detail-actions .task-edit-btn {
    width: auto;
    height: auto;
    background: rgba(79, 70, 229, 0.08);
    color: var(--ako-primary);
}
.task-detail-actions .task-edit-btn:hover { background: rgba(79, 70, 229, 0.15); }
.task-detail-actions .task-del-btn {
    width: auto;
    height: auto;
    background: rgba(239, 68, 68, 0.08);
    color: var(--ako-danger);
}
.task-detail-actions .task-del-btn:hover { background: rgba(239, 68, 68, 0.15); }
.task-detail-actions .task-share-btn {
    width: auto;
    height: auto;
    background: rgba(16, 185, 129, 0.08);
    color: #10b981;
}
.task-detail-actions .task-share-btn:hover { background: rgba(16, 185, 129, 0.15); }
.task-share-btn { background: rgba(16, 185, 129, 0.08); color: #10b981; }
.task-dup-btn { background: rgba(245, 158, 11, 0.08); color: #d97706; }
.task-detail-actions .task-dup-btn {
    width: auto;
    height: auto;
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
}
.task-detail-actions .task-dup-btn:hover { background: rgba(245, 158, 11, 0.15); }

/* Task Expandable Preview (notes/checklist inline) */
.task-preview,
.task-notes-preview { display: none; }

/* ===== Completed Section Divider ===== */
.completed-divider {
    padding: 6px 0;
}
.completed-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--ako-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 12px;
    width: 100%;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s;
}
.completed-toggle:hover {
    background: var(--ako-hover);
}
.completed-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.completed-toggle.open .completed-chevron {
    transform: rotate(90deg);
}
.completed-count {
    background: var(--ako-hover);
    color: var(--ako-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}
.all-done-msg {
    text-align: center;
    padding: 40px 20px;
    color: var(--ako-success);
    font-weight: 600;
    font-size: 1rem;
    animation: celebrateFade 0.6s ease;
}
.all-done-msg .celebrate-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 8px;
    animation: celebrateBounce 1s ease infinite;
}
.all-done-msg .celebrate-sub {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ako-text-secondary);
    margin-top: 4px;
}
@keyframes celebrateFade {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes celebrateBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.task-checklist-preview {
    margin-top: 8px;
    list-style: none;
    padding: 0;
}

.task-checklist-preview li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.82rem;
    color: var(--ako-text);
    cursor: pointer;
    transition: opacity 0.15s;
}

.task-checklist-preview li:hover { opacity: 0.7; }

.cl-check {
    width: 18px; height: 18px;
    border: 2px solid var(--ako-border);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    color: transparent;
    transition: all 0.15s;
}

.cl-check.cl-done {
    background: var(--ako-success);
    border-color: var(--ako-success);
    color: white;
}

.cl-text-done {
    text-decoration: line-through;
    color: var(--ako-text-secondary);
}

/* Empty State */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 30px; text-align: center; animation: celebrateFade 0.5s ease; }
.empty-icon {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(139,92,246,0.1));
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    animation: emptyFloat 3s ease-in-out infinite;
}
.empty-icon i { font-size: 36px; color: var(--ako-primary-light); }
@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ===== BOTTOM BAR ===== */
.bottom-bar {
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--ako-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 76px;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    z-index: 50;
    flex-shrink: 0;
    width: 100%;
}
.bottom-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; color: var(--ako-text-secondary); font-size: 0.68rem; font-weight: 600; cursor: pointer; padding: 8px 16px; border-radius: 12px; transition: color 0.2s; }
.bottom-btn i { font-size: 1.4rem; }
.bottom-btn.active { color: var(--ako-primary); }

.fab-wrapper { position: relative; top: -20px; }
.fab { width: 60px; height: 60px; border-radius: 50%; background: var(--ako-gradient); color: white; border: 4px solid var(--ako-bg); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 24px rgba(79, 70, 229, 0.4); transition: transform 0.2s, box-shadow 0.2s; }
.fab:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(79, 70, 229, 0.5); }
.fab:active { transform: scale(0.95); }

/* ===== MODALS ===== */
.modal-card { border-radius: 20px !important; }

@media (max-width: 575.98px) {
    .modal-card { border-radius: 20px 20px 0 0 !important; }
}

/* Checklist editor inside modals */
.checklist-items-edit { display: flex; flex-direction: column; gap: 6px; }

.checklist-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checklist-edit-row input {
    flex: 1;
    border: 1.5px solid var(--ako-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s;
}

.checklist-edit-row input:focus { border-color: var(--ako-primary); }

.checklist-edit-row .btn-remove-cl {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(239,68,68,0.08);
    color: var(--ako-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* ===== VOICE MODAL ===== */
.voice-modal-content { border-radius: 24px !important; }
.voice-modal-header h4 { background: var(--ako-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.voice-record-btn {
    width: 100px; height: 100px;
    border-radius: 50%;
    border: none;
    background: var(--ako-gradient);
    color: white;
    font-size: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.35);
}

.voice-record-btn:hover { transform: scale(1.05); }
.voice-record-btn:active { transform: scale(0.95); }
.voice-record-btn.recording { background: var(--ako-danger); box-shadow: 0 8px 30px rgba(239,68,68,0.4); animation: pulse-recording 1.5s infinite; }

@keyframes pulse-recording { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 20px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }

.recording-dot { display: inline-block; width: 10px; height: 10px; background: var(--ako-danger); border-radius: 50%; margin-right: 6px; animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.voice-waves { display: flex; align-items: center; justify-content: center; gap: 4px; height: 28px; }
.voice-waves span { display: inline-block; width: 4px; background: var(--ako-danger); border-radius: 4px; animation: wave 0.8s ease-in-out infinite; }
.voice-waves span:nth-child(1) { height: 12px; animation-delay: 0s; }
.voice-waves span:nth-child(2) { height: 20px; animation-delay: 0.1s; }
.voice-waves span:nth-child(3) { height: 28px; animation-delay: 0.2s; }
.voice-waves span:nth-child(4) { height: 20px; animation-delay: 0.3s; }
.voice-waves span:nth-child(5) { height: 12px; animation-delay: 0.4s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }

/* Detail Modal */
.detail-section { margin-bottom: 16px; }
.detail-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--ako-text-secondary); letter-spacing: 0.5px; margin-bottom: 6px; }
.detail-notes { background: var(--ako-bg); border-radius: 12px; padding: 12px 16px; font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap; color: var(--ako-text); }

/* Scrollbar */
.task-area::-webkit-scrollbar { width: 4px; }
.task-area::-webkit-scrollbar-track { background: transparent; }
.task-area::-webkit-scrollbar-thumb { background: var(--ako-border); border-radius: 4px; }

/* Desktop */
@media (min-width: 481px) {
    body { background: linear-gradient(135deg, #E0E7FF 0%, #F1F5F9 50%, #CFFAFE 100%); position: static; }
    .app-shell { border-radius: 24px; overflow: hidden; height: 92dvh; margin-top: 4dvh; border: 1px solid var(--ako-border); }
}

/* ===== TOAST NOTIFICATIONS ===== */
.ako-toast-container {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    max-width: 420px;
    width: 90%;
}

.ako-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    animation: toastIn 0.35s ease forwards;
    width: 100%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ako-toast.toast-success { background: linear-gradient(135deg, #10B981, #059669); }
.ako-toast.toast-error { background: linear-gradient(135deg, #EF4444, #DC2626); }
.ako-toast.toast-info { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.ako-toast.toast-warning { background: linear-gradient(135deg, #F59E0B, #D97706); }

.ako-toast i { font-size: 1.2rem; flex-shrink: 0; }
.ako-toast span { flex: 1; }
.ako-toast .undo-btn {
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ako-toast .undo-btn:hover { background: rgba(255,255,255,0.4); }

.ako-toast.toast-out { animation: toastOut 0.3s ease forwards; }

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

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

/* ===== INSTALL BANNER (PWA) ===== */
.install-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(84px + env(safe-area-inset-bottom));
    max-width: 456px;
    width: calc(100% - 24px);
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 14px;
    box-shadow: var(--ako-shadow);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 60;
}

.install-banner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.install-banner-text strong {
    font-size: 0.84rem;
    color: var(--ako-text);
    line-height: 1.2;
}

.install-banner-text span {
    font-size: 0.75rem;
    color: var(--ako-text-secondary);
    line-height: 1.3;
}

.install-action {
    border: none;
    background: var(--ako-gradient);
    color: #fff;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 8px 12px;
    white-space: nowrap;
}

.install-dismiss {
    border: 1px solid var(--ako-border);
    background: var(--ako-bg);
    color: var(--ako-text-secondary);
    border-radius: 10px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ===== SWIPE GESTURES ===== */
.task-item {
    position: relative;
    overflow: hidden;
}

.swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    z-index: 0;
    transition: opacity 0.2s;
}

.swipe-action-left {
    right: 0;
    background: var(--ako-danger);
    border-radius: 0;
}

.swipe-action-right {
    left: 0;
    background: var(--ako-success);
    border-radius: 0;
}

.task-item .task-main,
.task-item .task-preview,
.task-item .task-detail {
    position: relative;
    z-index: 1;
    background: var(--ako-surface);
    transition: transform 0.15s ease;
}

/* ===== MINI CALENDAR WIDGET ===== */
.calendar-popover {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--ako-surface);
    border-radius: var(--ako-radius);
    box-shadow: var(--ako-shadow-lg);
    border: 1px solid var(--ako-border);
    padding: 16px;
    width: min(300px, calc(100vw - 24px));
    margin-top: 8px;
    animation: calendarIn 0.2s ease forwards;
}

@keyframes calendarIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

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

.cal-header-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ako-text);
}

.cal-nav-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--ako-border);
    background: var(--ako-surface);
    color: var(--ako-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.cal-nav-btn:hover { background: var(--ako-primary); color: white; border-color: var(--ako-primary); }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.cal-day-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ako-text-secondary);
    text-transform: uppercase;
    padding: 4px 0;
}

.cal-day {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--ako-text);
    margin: 0 auto;
    position: relative;
}

.cal-day:hover { background: rgba(79, 70, 229, 0.1); }
.cal-day.cal-today { font-weight: 800; color: var(--ako-primary); border: 2px solid var(--ako-primary); }
.cal-day.cal-selected { background: var(--ako-primary); color: white; font-weight: 700; }
.cal-day.cal-other-month { color: var(--ako-text-secondary); opacity: 0.4; }
.cal-day.cal-has-tasks::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--ako-primary);
}
.cal-day.cal-selected.cal-has-tasks::after { background: white; }

.date-strip { position: relative; }

/* ===== DRAG & DROP ===== */
.task-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.task-item.drag-over {
    border-top: 3px solid var(--ako-primary);
}

.drag-handle {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--ako-border);
    font-size: 0.85rem;
    flex-shrink: 0;
    padding: 0 2px;
    transition: opacity 0.15s, color 0.15s;
    touch-action: none;
    opacity: 0;
}
.task-item:hover .drag-handle { opacity: 1; }
@media (hover: none) {
    .task-item .drag-handle {
        display: flex;
        opacity: 0.65;
    }
}

.drag-handle:hover { color: var(--ako-text-secondary); }
.drag-handle:active { cursor: grabbing; }

/* ===== KEYBOARD SHORTCUT HINT ===== */
.kbd-hint {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ako-surface);
    color: var(--ako-text);
    padding: 12px 24px;
    border-radius: 14px;
    box-shadow: var(--ako-shadow-lg);
    border: 1px solid var(--ako-border);
    font-size: 0.82rem;
    z-index: 9999;
    animation: toastIn 0.3s ease;
    max-width: 360px;
    text-align: center;
}

.kbd-hint kbd {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--ako-bg);
    border: 1px solid var(--ako-border);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    margin: 0 2px;
}

/* ===== ICON BUTTONS (Search / Settings) ===== */
.icon-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.3);
    background: transparent;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}
.icon-btn:hover { background: rgba(255,255,255,0.15); }

.icon-btn { position: relative; }
.vault-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #EF4444;
    color: #fff;
    border-radius: 50%;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
}

.inbox-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--ako-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
}

.inbox-tabs .btn {
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #6B7280;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
}
.inbox-tabs .btn.active {
    background: var(--ako-primary);
    border-color: var(--ako-primary);
    color: #fff;
}

/* ===== SMART CHAT ===== */
.chatbot-modal-content {
    border-radius: 20px !important;
}

.chatbot-modal-content .modal-body {
    min-height: 0;
}

.chatbot-messages {
    background: var(--ako-bg);
    border: 1px solid var(--ako-border);
    border-radius: 14px;
    padding: 12px;
    min-height: 280px;
    max-height: 48vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-msg {
    max-width: 90%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-msg.user {
    align-self: flex-end;
    background: var(--ako-primary);
    color: white;
    border-bottom-right-radius: 6px;
}

.chat-msg.user img {
    max-width: 120px;
    max-height: 120px;
    border-radius: 8px;
    margin-bottom: 6px;
    display: block;
}

.chat-msg.assistant {
    align-self: flex-start;
    background: var(--ako-surface);
    color: var(--ako-text);
    border: 1px solid var(--ako-border);
    border-bottom-left-radius: 6px;
    white-space: normal;
}

.chat-msg.assistant p {
    margin: 0 0 8px;
}

.chat-msg.assistant p:last-child {
    margin-bottom: 0;
}

.chat-msg.assistant h4,
.chat-msg.assistant h5,
.chat-msg.assistant h6 {
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.35;
}

.chat-msg.assistant h4 { font-size: 1rem; }
.chat-msg.assistant h5 { font-size: 0.94rem; }
.chat-msg.assistant h6 { font-size: 0.89rem; }

.chat-msg.assistant ul,
.chat-msg.assistant ol {
    margin: 0 0 8px;
    padding-left: 1.15rem;
}

.chat-msg.assistant li {
    margin: 2px 0;
}

.chat-msg.assistant code {
    background: var(--ako-bg);
    border: 1px solid var(--ako-border);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 0.8em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.chat-md-pre {
    margin: 0 0 10px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    overflow-x: auto;
    border: 1px solid rgba(148,163,184,0.25);
}

.chat-md-pre code {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: inherit;
    font-size: 0.8rem;
    white-space: pre;
}

.chat-msg.assistant a {
    color: var(--ako-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
    font-size: 0.82rem;
}

.chat-md-table td {
    border: 1px solid var(--ako-border);
    padding: 5px 7px;
    vertical-align: top;
}

.chat-msg-sources {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ako-border);
    font-size: 0.75rem;
}

.chat-msg-sources a {
    color: var(--ako-primary);
    text-decoration: none;
}

.chat-msg-sources a:hover {
    text-decoration: underline;
}

.chatbot-input-row {
    display: flex;
    gap: 8px;
}

.chatbot-input-row .form-control {
    border-radius: 999px;
}

.chatbot-input-row .btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chatbotSendBtn {
    background: none;
    border: none;
    color: var(--bs-primary, #6366f1);
    font-size: 1.35rem;
    padding: 0;
}
#chatbotSendBtn:hover {
    color: var(--bs-primary, #4f46e5);
    transform: scale(1.1);
}
#chatbotSendBtn:disabled {
    color: #adb5bd;
    transform: none;
}

#budgetChatSendBtn {
    background: none !important;
    border: none !important;
    color: #059669;
    font-size: 1.35rem;
    padding: 0;
    box-shadow: none !important;
}
#budgetChatSendBtn:hover {
    color: #047857;
    transform: scale(1.1);
}
#budgetChatSendBtn:disabled {
    color: #adb5bd;
    transform: none;
}

.chat-media-btn {
    width: 38px !important;
    height: 38px !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 999px !important;
    flex-shrink: 0;
}

.chat-image-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 0;
}

.chat-image-preview img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--ako-border);
}

.chat-image-remove {
    background: var(--ako-text-secondary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 6px;
}

/* ===== GRAMMAR CHECK BUTTON ===== */
.grammar-check-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ako-text-secondary);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.82rem;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s;
    z-index: 2;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 3px;
}

.grammar-check-btn:hover {
    opacity: 1;
    color: var(--ako-primary);
}

.grammar-check-btn.checking {
    opacity: 1;
    color: var(--ako-primary);
}

.grammar-wrap {
    position: relative;
}

.grammar-wrap > textarea,
.grammar-wrap > input[type="text"] {
    padding-right: 38px;
}

/* Grammar button inside form-floating — position relative to form-floating container */
.form-floating > .grammar-check-btn {
    top: 50%;
}

.chatbot-hint {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--ako-text-secondary);
}

@media (max-width: 575.98px) {
    #chatbotModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .chatbot-modal-content {
        border-radius: 20px 20px 0 0 !important;
        height: 100dvh;
    }

    .chatbot-modal-content .modal-header {
        padding: 0.85rem 0.9rem 0.35rem;
    }

    .chatbot-modal-content .modal-body {
        padding: 0.75rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        flex: 1;
        min-height: 0;
    }

    .chatbot-messages {
        min-height: 0;
        max-height: none;
        flex: 1;
        padding: 10px;
        border-radius: 12px;
    }

    .chat-msg {
        max-width: 96%;
        font-size: 0.86rem;
    }

    .chatbot-input-row {
        margin-top: 8px !important;
    }

    .chat-media-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem;
    }

    .chatbot-hint {
        margin-top: 6px;
        font-size: 0.72rem;
    }
}

/* ===== SEARCH BAR ===== */
.search-bar {
    background: var(--ako-surface);
    padding: 10px 12px;
    border-bottom: 1px solid var(--ako-border);
    flex-shrink: 0;
}
.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ako-bg);
    border-radius: var(--ako-radius-sm);
    padding: 6px 12px;
    border: 1.5px solid var(--ako-border);
    transition: border-color 0.2s;
}
.search-input-wrap:focus-within { border-color: var(--ako-primary); }
.search-input-wrap i { color: var(--ako-text-secondary); font-size: 0.95rem; }
.search-input-wrap input {
    flex: 1; border: none; background: transparent;
    outline: none; font-size: 0.9rem; color: var(--ako-text);
    font-family: inherit;
}
.search-input-wrap input::placeholder { color: var(--ako-text-secondary); }
.search-close-btn {
    border: none; background: none; color: var(--ako-text-secondary);
    font-size: 1.1rem; cursor: pointer; padding: 0;
}
.search-results {
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
    z-index: 20;
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--ako-border);
    transition: background 0.15s;
}
.search-result-item:hover { background: var(--ako-bg); }
.search-result-item.completed .search-result-text { text-decoration: line-through; color: var(--ako-text-secondary); }
.search-result-body { flex: 1; min-width: 0; }
.search-result-text { font-size: 0.9rem; font-weight: 600; }
.search-result-meta { font-size: 0.75rem; color: var(--ako-text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.search-empty { padding: 20px; text-align: center; color: var(--ako-text-secondary); font-size: 0.88rem; }

/* ===== VIEW TOGGLE STRIP ===== */
.view-toggle-strip {
    display: flex;
    gap: 4px;
    background: var(--ako-bg);
    border-radius: 10px;
    padding: 3px;
    margin: 10px 12px 6px;
    flex-shrink: 0;
}
.view-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ako-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.view-btn.active {
    background: var(--ako-surface);
    color: var(--ako-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.view-btn i { font-size: 0.9rem; }

/* ===== AGENDA VIEW ===== */
.agenda-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 24px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
.agenda-area::-webkit-scrollbar { width: 4px; }
.agenda-area::-webkit-scrollbar-thumb { background: var(--ako-border); border-radius: 4px; }

/* ===== TRANSIT VIEW ===== */
.transit-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}
.transit-area::-webkit-scrollbar { width: 4px; }
.transit-area::-webkit-scrollbar-track { background: transparent; }
.transit-area::-webkit-scrollbar-thumb { background: var(--ako-border); border-radius: 4px; }

.agenda-date-section {
    margin: 0 12px 12px;
    background: var(--ako-surface);
    border-radius: var(--ako-radius);
    box-shadow: var(--ako-shadow);
    overflow: hidden;
    animation: slideUp 0.3s ease forwards;
}
.agenda-date-section.agenda-today {
    border: 2px solid var(--ako-primary);
}
.agenda-date-section.agenda-past {
    opacity: 0.7;
}

.agenda-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--ako-border);
}
.agenda-date-header:hover { background: var(--ako-bg); }

.agenda-date-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.agenda-date-day {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ako-text-secondary);
    width: 32px;
}
.agenda-date-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ako-text);
    line-height: 1;
}
.agenda-date-month {
    font-size: 0.78rem;
    color: var(--ako-text-secondary);
    font-weight: 500;
}
.agenda-date-progress {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ako-text-secondary);
    background: var(--ako-bg);
    padding: 2px 10px;
    border-radius: 10px;
}

.agenda-task-item {
    border-bottom: 1px solid var(--ako-border);
}
.agenda-task-item:last-child { border-bottom: none; }
.agenda-task-item.completed { opacity: 0.6; }
.agenda-task-item.completed .agenda-task-text { text-decoration: line-through; color: var(--ako-text-secondary); }

.agenda-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    min-height: 44px;
}
.agenda-task-row:hover { background: rgba(79, 70, 229, 0.03); }

.agenda-task-check {
    width: 22px; height: 22px;
    border: 2px solid var(--ako-border);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: transparent;
    transition: all 0.2s;
}
.agenda-task-check.done {
    background: var(--ako-success);
    border-color: var(--ako-success);
    color: white;
}

.agenda-task-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agenda-task-text {
    font-size: 0.88rem;
    font-weight: 500;
    word-break: break-word;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-task-time-hint {
    font-size: 0.72rem;
    color: var(--ako-text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

.agenda-task-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.agenda-act-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.agenda-edit-btn { background: rgba(79, 70, 229, 0.08); color: var(--ako-primary); }
.agenda-edit-btn:hover { background: rgba(79, 70, 229, 0.18); }
.agenda-del-btn { background: rgba(239, 68, 68, 0.08); color: var(--ako-danger); }
.agenda-del-btn:hover { background: rgba(239, 68, 68, 0.18); }

/* ===== OVERDUE BANNER ===== */
.overdue-banner {
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04));
    border-bottom: 1px solid rgba(239,68,68,0.15);
    padding: 10px 16px;
}
.overdue-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.overdue-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.overdue-toggle-left i { color: var(--ako-danger); font-size: 1rem; }
.overdue-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ako-danger);
}
.overdue-chevron {
    color: var(--ako-danger);
    transition: transform 0.2s;
    font-size: 0.9rem;
}
.overdue-chevron.rotated { transform: rotate(180deg); }

.overdue-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.overdue-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ako-surface);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.85rem;
}
.overdue-item:hover { background: var(--ako-bg); }
.overdue-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.overdue-item-body span { font-weight: 500; }
.overdue-item-body small { font-size: 0.72rem; color: var(--ako-text-secondary); }
.overdue-complete-btn {
    color: var(--ako-success);
    font-size: 1.1rem;
    padding: 4px 6px;
    background: none;
    border: none;
}

/* ===== PRIORITY SELECTOR (in modals) ===== */
.priority-selector {
    display: flex;
    gap: 6px;
}
.priority-btn {
    flex: 1;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--ako-border);
    background: var(--ako-surface);
    color: var(--ako-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.priority-btn[data-priority="high"]:hover,
.priority-btn[data-priority="high"].active {
    background: rgba(239,68,68,0.1);
    border-color: #EF4444;
    color: #EF4444;
}
.priority-btn[data-priority="medium"]:hover,
.priority-btn[data-priority="medium"].active {
    background: rgba(245,158,11,0.1);
    border-color: #F59E0B;
    color: #F59E0B;
}
.priority-btn[data-priority="low"]:hover,
.priority-btn[data-priority="low"].active {
    background: rgba(16,185,129,0.1);
    border-color: #10B981;
    color: #10B981;
}

/* ===== CATEGORY & PRIORITY & RECURRENCE Tags ===== */
.cat-badge, .cat-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}
.cat-badge-sm { font-size: 0.68rem; padding: 1px 6px; }

.task-meta-tag.cat-tag { text-transform: capitalize; }
.task-meta-tag.priority-high-tag { color: #EF4444; background: rgba(239,68,68,0.08); }
.task-meta-tag.recurrence-tag { color: #8B5CF6; background: rgba(139,92,246,0.08); text-transform: capitalize; }

/* Completed tasks in list */
.completed-list .task-item {
    opacity: 0.55;
}
.completed-list .task-item:hover {
    opacity: 0.8;
}

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

/* ===== SETTINGS MODAL ===== */
.settings-modal-content {
    border-radius: 24px !important;
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .settings-modal-content { border-radius: 24px 24px 0 0 !important; }
}
.settings-modal-header {
    padding: 20px 24px 12px;
}
.settings-modal-title {
    background: var(--ako-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-size: 1.25rem;
}
.settings-tabs-wrapper {
    padding: 0 24px;
    border-bottom: 1px solid var(--ako-border);
}
.settings-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ako-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    border-radius: 0;
}
.settings-tab:hover {
    color: var(--ako-primary);
    background: rgba(79, 70, 229, 0.04);
}
.settings-tab.active {
    color: var(--ako-primary);
    border-bottom-color: var(--ako-primary);
}
.settings-tab-content {
    display: none;
}
.settings-tab-content.active {
    display: block;
    animation: settingsFadeIn 0.25s ease;
}
@keyframes settingsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.settings-card {
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color 0.2s ease;
}
.settings-card:hover {
    border-color: #CBD5E1;
}
.settings-card:last-child {
    margin-bottom: 0;
}
.settings-card-danger {
    border-color: #FECACA;
}
.settings-card-danger:hover {
    border-color: #FCA5A5;
}
.settings-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.settings-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.settings-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1px;
    color: var(--ako-text);
}
.settings-card-desc {
    font-size: 0.7rem;
    color: var(--ako-text-secondary);
    margin-bottom: 0;
}
.settings-input {
    border-radius: 10px !important;
    border-color: var(--ako-border) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-input:focus {
    border-color: var(--ako-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}
.settings-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--ako-border);
}
.settings-section:last-child { border-bottom: none; }
.settings-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ako-text-secondary);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* ===== AI SMART FEATURES ===== */
.ai-hub-btn { color: var(--ako-primary); font-size: 1.15rem; }
.ai-hub-btn:hover { transform: scale(1.15); }

/* AI Hub Modal */
.ai-hub-modal-content { border-radius: 24px !important; }
.ai-hub-title { background: var(--ako-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; }
.ai-feature-card {
    background: var(--ako-bg);
    border: 1px solid var(--ako-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
}
.ai-feature-header {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: var(--ako-text);
}
.ai-feature-desc {
    font-size: 0.82rem;
    color: var(--ako-text-secondary);
    margin-bottom: 10px;
}

/* NL Task Input */
.ai-nl-input-row {
    display: flex;
    gap: 8px;
}
.ai-nl-input-row input {
    flex: 1;
    border-radius: 12px;
    border: 1px solid var(--ako-border);
    padding: 8px 14px;
    font-size: 0.9rem;
    background: var(--ako-surface);
    color: var(--ako-text);
}
.ai-nl-input-row button {
    border-radius: 12px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--ako-gradient);
    color: white;
    border: none;
}
.ai-ocr-input-row {
    display: flex;
    gap: 8px;
}
.ai-ocr-input-row input {
    flex: 1;
    border-radius: 12px;
    border: 1px solid var(--ako-border);
    background: var(--ako-surface);
    color: var(--ako-text);
    font-size: 0.84rem;
}
.ai-ocr-input-row button {
    border-radius: 12px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.ai-nl-result {
    margin-top: 12px;
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 12px;
    padding: 14px;
}
.ai-parsed-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 6px;
    color: var(--ako-text);
}
.ai-parsed-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--ako-text-secondary);
    margin-bottom: 6px;
}
.ai-parsed-meta i { margin-right: 3px; }
.ai-parsed-notes, .ai-parsed-checklist {
    font-size: 0.82rem;
    color: var(--ako-text-secondary);
    margin-top: 4px;
}
.ai-nl-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.ai-nl-actions .btn { border-radius: 10px; font-size: 0.85rem; padding: 6px 14px; }
.ai-ocr-task-item {
    border: 1px solid var(--ako-border);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--ako-bg);
}
.ai-ocr-task-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-ocr-task-select {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    width: 100%;
}
.ai-ocr-task-select input,
.ai-ocr-select-all input {
    accent-color: var(--ako-primary);
}
.ai-ocr-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ako-text-secondary);
    font-size: 0.76rem;
    -webkit-user-select: none;
    user-select: none;
}
.ai-ocr-task-title { font-size: 0.88rem; font-weight: 600; color: var(--ako-text); }
.ai-ocr-task-meta { font-size: 0.76rem; color: var(--ako-text-secondary); margin-top: 2px; }

/* AI Result content (briefing/suggestions) */
.ai-result-content {
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ako-text);
}
.ai-result-content h1, .ai-result-content h2, .ai-result-content h3 { font-size: 1rem; font-weight: 700; margin-top: 10px; }
.ai-result-content ul { padding-left: 18px; margin-bottom: 6px; }
.ai-result-content li { margin-bottom: 2px; }
.ai-result-content strong { color: var(--ako-primary); }

/* Suggestion Cards */
.ai-suggestion-card {
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.ai-suggestion-header {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.ai-suggestion-icon { font-size: 1.1rem; }
.ai-suggestion-desc {
    font-size: 0.82rem;
    color: var(--ako-text-secondary);
    margin: 0;
}

/* Auto-Categorize Inline Button */
.ai-categorize-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 4px;
}
.ai-categorize-btn {
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 8px;
    background: var(--ako-gradient);
    color: white;
    border: none;
    white-space: nowrap;
}
.ai-categorize-btn:hover { opacity: 0.9; }
.ai-categorize-hint {
    font-size: 0.78rem;
    color: var(--ako-text-secondary);
}

/* ===== PWA STANDALONE MODE FIXES ===== */
@media all and (display-mode: standalone) {
    body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .app-shell {
        height: 100dvh;
        overflow: hidden;
        padding-top: env(safe-area-inset-top);
    }

    .app-topbar {
        padding-top: 12px;
    }

    .bottom-bar {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .task-area,
    .agenda-area,
    .week-area {
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== MOBILE SPECIFIC FIXES ===== */
@media (max-width: 480px) {
    html, body {
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
    }

    .app-shell {
        height: -webkit-fill-available;
        height: 100dvh;
        max-width: 100%;
    }

    /* Compact topbar for mobile */
    .app-topbar {
        padding: 8px 10px;
        padding-top: max(8px, env(safe-area-inset-top));
        min-height: 48px;
    }

    .brand-sm {
        font-size: 1rem;
        gap: 5px;
    }

    .brand-sm i {
        font-size: 1.1rem;
    }

    .brand-sm i {
        font-size: 1.1rem;
    }

    .topbar-right {
        gap: 3px;
    }

    .icon-btn {\n        width: 32px;\n        height: 32px;\n        border-radius: 8px;\n        font-size: 0.9rem;\n    }

    /* Kill double padding: px-3 on containers + margin on items is redundant */
    .task-list,
    .completed-list,
    .agenda-list {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Task cards */
    .task-item {
        margin: 0 10px;
    }

    .task-main {
        padding: 10px;
        gap: 8px;
    }

    .drag-handle {
        display: flex;
        opacity: 0.65;
    }

    .task-check {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .task-text {
        font-size: 0.88rem;
    }

    .task-body {
        flex: 1 1 0%;
        min-width: 0;
        overflow: hidden;
    }

    .task-expand-chevron {
        padding: 4px;
        font-size: 0.68rem;
    }

    .task-item.expanded .task-detail {
        padding: 4px 10px 12px 42px;
    }

    .bottom-bar {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        min-height: 68px;
    }

    .bottom-btn {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .bottom-btn i {
        font-size: 1.2rem;
    }

    .fab {
        width: 54px;
        height: 54px;
        font-size: 1.4rem;
    }

    .fab-wrapper {
        top: -18px;
    }

    .task-area {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .agenda-area {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Prevent iOS input zoom — inputs must be >= 16px */
    .form-control,
    .form-select,
    .form-floating > .form-control,
    .search-input-wrap input {
        font-size: 16px !important;
    }

    /* Prevent scroll-through when modals open */
    .modal-open .app-shell {
        overflow: hidden;
    }

    .modal-open .task-area,
    .modal-open .agenda-area,
    .modal-open .vault-area,
    .modal-open .vault-files-area,
    .modal-open .impact-area,
    .modal-open .impact-detail-area,
    .modal-open .shop-area,
    .modal-open .shop-detail-area,
    .modal-open .directory-area,
    .modal-open .directory-detail-area,
    .modal-open .notes-area,
    .modal-open .note-detail-area,
    .modal-open .family-area,
    .modal-open .family-detail-area,
    .modal-open .budget-area,
    .modal-open .budget-detail-area,
    .modal-open .invoice-area,
    .modal-open .invoice-detail-area,
    .modal-open .receipts-area,
    .modal-open .receipt-detail-area,
    .modal-open .agent-area,
    .modal-open .transit-area,
    .modal-open .inbox-area,
    .modal-open .forms-area,
    .modal-open .form-detail-area,
    .modal-open .trips-area,
    .modal-open .trip-detail-area {
        overflow: hidden;
    }
}

/* ===== VAULT ===== */
.vault-area, .vault-files-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}

.vault-header {
    border-bottom: 1px solid var(--ako-border);
    background: var(--ako-card-bg);
}

.vault-header h5 {
    font-size: 1.3rem;
}

/* Vault Link Cards */
.vault-link-card {
    background: var(--ako-card-bg);
    border-radius: 16px;
    border: 1.5px solid var(--ako-border);
    padding: 16px;
    margin-top: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vault-link-card:hover {
    border-color: var(--ako-primary-light);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.08);
}

.vault-link-card.vault-link-inactive {
    opacity: 0.6;
}

.vault-link-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.vault-link-label {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
    color: var(--ako-text-primary);
}

.vault-link-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

.vault-link-expiry {
    margin-top: 2px;
    font-size: 0.78rem;
}

.vault-link-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vault-link-actions .vault-action-btn {
    font-size: 0.78rem;
    padding: 4px 10px;
}

/* Vault Files Grid */
.vault-files-header {
    border-bottom: 1px solid var(--ako-border);
    background: var(--ako-card-bg);
}

.vault-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding-top: 12px;
}

.vault-file-card {
    background: var(--ako-card-bg);
    border-radius: 14px;
    border: 1.5px solid var(--ako-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vault-file-card:hover {
    border-color: var(--ako-primary-light);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.08);
}

/* Vault bulk select mode */
.vault-file-checkbox {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ako-primary);
}
#vaultFilesList.vault-select-mode .vault-file-card {
    position: relative;
    cursor: pointer;
}
#vaultFilesList.vault-select-mode .vault-file-checkbox {
    display: block;
}
#vaultFilesList.vault-select-mode .vault-file-card.vault-selected {
    outline: 2.5px solid var(--ako-primary);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.vault-file-preview {
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-file-open-target {
    cursor: pointer;
}

.vault-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vault-file-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0b1020;
}

.vault-file-video-preview {
    position: relative;
}

.vault-file-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.15));
    color: #f8fafc;
    pointer-events: none;
}

.vault-file-video-play i {
    font-size: 2rem;
    text-shadow: 0 2px 10px rgba(2, 6, 23, 0.45);
}

.vault-file-audio-preview {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    justify-content: center;
}

.vault-file-audio-icon i {
    font-size: 1.4rem;
    color: var(--ako-primary-light);
}

.vault-file-audio-preview audio {
    width: 100%;
    max-width: 100%;
    height: 30px;
}

.vault-file-icon {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.04);
}

.vault-file-icon i {
    font-size: 2.5rem;
    color: var(--ako-primary-light);
}

.vault-file-info {
    padding: 10px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vault-file-name {
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ako-text-primary);
}

.vault-file-meta {
    font-size: 0.72rem;
    color: var(--ako-text-secondary);
}

.vault-file-duration {
    font-size: 0.68rem;
    font-weight: 600;
    color: #334155;
    background: #e2e8f0;
    border-radius: 999px;
    padding: 1px 6px;
    min-width: 34px;
    text-align: center;
}

.vault-file-actions {
    padding: 6px 12px 10px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.vault-file-actions .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-media-modal-content {
    background: #0f172a;
    color: #e2e8f0;
}

.vault-media-modal-content .btn-close {
    filter: invert(1) grayscale(100%);
}

.vault-media-modal-body {
    min-height: min(72vh, 720px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.vault-media-modal-item {
    max-width: 100%;
    max-height: min(68vh, 680px);
    border-radius: 12px;
    background: #020617;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.vault-media-zoomable {
    transition: transform 0.15s ease;
    cursor: zoom-in;
    touch-action: pan-y;
}

.vault-media-zoomable.is-zoomed {
    cursor: zoom-out;
}

.vault-media-audio-wrap {
    width: min(560px, 96%);
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.vault-media-audio-icon i {
    font-size: 1.7rem;
    color: #7dd3fc;
}

.vault-media-audio-player {
    width: 100%;
}

/* ===== MONTH VIEW ===== */
.month-area {
    padding-bottom: 100px;
    overflow-y: auto;
    height: calc(100dvh - 140px);
    -webkit-overflow-scrolling: touch;
}

.month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.month-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ako-text);
}

.month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.month-weekday {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ako-text-secondary);
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.month-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.month-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--ako-radius-sm);
    cursor: pointer;
    position: relative;
    background: var(--ako-surface);
    transition: background 0.15s, box-shadow 0.15s;
    min-height: 44px;
}

.month-day:hover {
    background: var(--ako-bg);
    box-shadow: var(--ako-shadow);
}

.month-day.empty {
    background: transparent;
    cursor: default;
}

.month-day.empty:hover {
    box-shadow: none;
}

.month-day.today {
    background: var(--ako-primary);
    color: #fff;
}

.month-day.today:hover {
    background: var(--ako-primary-dark);
}

.month-day.selected:not(.today) {
    outline: 2px solid var(--ako-primary);
    outline-offset: -2px;
}

.month-day-num {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}

.month-day-badge {
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--ako-primary-light);
    color: #fff;
    border-radius: 10px;
    padding: 1px 5px;
    margin-top: 2px;
    line-height: 1.3;
    min-width: 16px;
    text-align: center;
}

.month-day.today .month-day-badge {
    background: rgba(255,255,255,0.3);
}

.month-day-badge.all-done {
    background: var(--ako-success);
}

.month-day.has-tasks::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ako-primary-light);
}

.month-day.today.has-tasks::after {
    background: rgba(255,255,255,0.5);
}

/* ===== WEEK VIEW ===== */
.week-area {
    padding-bottom: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100dvh - 140px);
    -webkit-overflow-scrolling: touch;
}

.week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.week-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ako-text);
    text-align: center;
}

/* --- Desktop: 7-column grid --- */
.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    min-height: 200px;
}

.week-column {
    display: flex;
    flex-direction: column;
    background: var(--ako-surface);
    border-radius: var(--ako-radius-sm);
    overflow: hidden;
    min-width: 0;
}

.week-column.week-past {
    opacity: 0.7;
}

.week-day-header {
    text-align: center;
    padding: 8px 4px;
    cursor: pointer;
    border-bottom: 1px solid var(--ako-border);
    transition: background 0.15s;
}

.week-day-header:hover {
    background: var(--ako-bg);
}

.week-day-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ako-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ako-text);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-top: 2px;
}

.week-column.week-today .week-day-num {
    background: var(--ako-primary);
    color: #fff;
}

.week-day-progress {
    display: block;
    font-size: 0.6rem;
    color: var(--ako-text-secondary);
    margin-top: 1px;
}

.week-tasks-list {
    flex: 1;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    max-height: calc(100dvh - 280px);
}

.week-task-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 6px;
    border-left: 3px solid var(--ako-primary-light);
    background: var(--ako-bg);
    transition: background 0.12s, box-shadow 0.12s;
    cursor: pointer;
    position: relative;
}

.week-task-item:hover {
    background: rgba(79, 70, 229, 0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.week-task-check {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    border: 2px solid var(--ako-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    color: transparent;
    transition: all 0.15s;
    margin-top: 1px;
}

.week-task-check:hover {
    border-color: var(--ako-primary);
    background: rgba(79, 70, 229, 0.08);
}

.week-task-check.done {
    background: var(--ako-success);
    border-color: var(--ako-success);
    color: #fff;
}

.week-task-body {
    flex: 1;
    min-width: 0;
}

.week-task-text {
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--ako-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.week-task-item.completed .week-task-text {
    text-decoration: line-through;
    color: var(--ako-text-secondary);
}

.week-task-time {
    font-size: 0.62rem;
    color: var(--ako-text-secondary);
    margin-top: 1px;
}

.week-task-actions {
    display: none;
    gap: 2px;
    position: absolute;
    right: 4px;
    top: 3px;
}

.week-task-item:hover .week-task-actions {
    display: flex;
}

.week-task-act {
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(255,255,255,0.9);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--ako-text-secondary);
    cursor: pointer;
    padding: 0;
}

.week-task-act:hover {
    background: var(--ako-bg);
    color: var(--ako-primary);
}

.week-task-act.week-del:hover {
    color: var(--ako-danger);
}

.week-empty {
    text-align: center;
    padding: 12px 4px;
    font-size: 0.65rem;
    color: var(--ako-text-secondary);
    opacity: 0.6;
}

/* --- Mobile: stacked day-card layout --- */
@media (max-width: 576px) {
    .week-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-x: hidden;
    }
    .week-column {
        flex-direction: row;
        align-items: stretch;
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }
    .week-column.week-past { opacity: 0.6; }
    .week-day-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        border-bottom: none;
        border-right: 1px solid var(--ako-border);
        min-width: 52px;
        width: 52px;
        flex-shrink: 0;
    }
    .week-day-label { font-size: 0.65rem; }
    .week-day-num { font-size: 0.9rem; width: 26px; height: 26px; }
    .week-day-progress { font-size: 0.58rem; }
    .week-tasks-list {
        flex: 1;
        flex-direction: column;
        padding: 6px 8px;
        gap: 4px;
        overflow-y: visible;
        max-height: none;
        min-height: 40px;
    }
    .week-task-item {
        gap: 8px;
        padding: 6px 8px;
        border-radius: 8px;
    }
    .week-task-check {
        width: 20px; height: 20px; min-width: 20px;
        font-size: 11px; margin-top: 0;
    }
    .week-task-text {
        font-size: 0.82rem;
        line-height: 1.35;
        -webkit-line-clamp: 1;
    }
    .week-task-time { font-size: 0.7rem; }
    .week-task-actions { display: none !important; }
    .week-empty {
        padding: 6px 4px;
        font-size: 0.72rem;
    }
    .week-empty i { display: none; }
    .week-empty::after { content: 'No tasks'; }
}

/* ===== IMPACT ===== */
.impact-area, .impact-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}

.impact-header {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.impact-header h5 {
    font-size: 1.1rem;
}

/* Campaign Cards */
.impact-campaign-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--soft-shadow);
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.impact-campaign-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.impact-card-image {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: #f0f0f0;
}

.impact-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.impact-card-body {
    padding: 14px 16px;
}

.impact-card-body h6 {
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Impact Detail */
.impact-detail-header {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.impact-progress-bar-wrap .progress {
    border-radius: 10px;
    background: rgba(0,0,0,0.06);
}

.impact-progress-bar-wrap .progress-bar {
    border-radius: 10px;
}

/* Pledge Rows */
.impact-pledge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--soft-shadow);
    margin-bottom: 8px;
}

.impact-pledge-row .fw-semibold {
    font-size: 0.88rem;
}

/* ===== Gallery Carousel ===== */
.gallery-carousel {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}
.gallery-carousel-viewport {
    overflow: hidden;
    border-radius: 16px;
}
.gallery-carousel-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-slide {
    min-width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
}
.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.gallery-audio-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 24px;
    color: #fff;
}
.gallery-audio-slide i {
    font-size: 3rem;
    opacity: 0.7;
}
.gallery-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: #333;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: background 0.2s;
    z-index: 2;
}
.gallery-carousel-btn:hover {
    background: #fff;
}
.gallery-carousel-prev { left: 10px; }
.gallery-carousel-next { right: 10px; }
.gallery-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.gallery-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* Gallery Thumbs (modal preview) */
.campaign-gallery-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gallery-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.1);
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    color: #64748b;
    font-size: 1.4rem;
}
.gallery-thumb-label {
    display: block;
    font-size: 0.55rem;
    text-align: center;
    color: #64748b;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gallery-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(239,68,68,0.9);
    color: #fff;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
[data-bs-theme="dark"] .gallery-thumb {
    background: #1e293b;
    border-color: rgba(255,255,255,0.1);
}
[data-bs-theme="dark"] .gallery-thumb-icon {
    color: #94a3b8;
}

/* Impact Tabs mobile fix */
#impactTabs {
    flex-wrap: nowrap;
}
#impactTabs .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
}

/* Comms Tab */
.comms-alert {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 14px; border-radius: 12px; font-size: 0.85rem;
}
.comms-alert-warning {
    background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
}
[data-bs-theme="dark"] .comms-alert-warning {
    background: #451a03; color: #fbbf24; border-color: #78350f;
}
.comms-summary-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.comms-summary-card {
    background: var(--ako-surface); border: 1px solid var(--ako-border);
    border-radius: 12px; padding: 12px 10px; text-align: center;
}
.comms-summary-value {
    font-size: 1.3rem; font-weight: 700; line-height: 1.2;
}
.comms-summary-total {
    font-size: 0.85rem; font-weight: 500; color: var(--ako-text-secondary);
}
.comms-summary-label {
    font-size: 0.68rem; color: var(--ako-text-secondary); margin-top: 2px;
}
.comms-pledge-card {
    background: var(--ako-surface); border: 1px solid var(--ako-border);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.comms-pledge-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.comms-pledge-avatar {
    width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.comms-status-paid { background: #d1fae5; color: #059669; }
.comms-status-pending { background: #fef3c7; color: #d97706; }
.comms-status-cancelled { background: #fee2e2; color: #dc2626; }
[data-bs-theme="dark"] .comms-status-paid { background: #064e3b; color: #6ee7b7; }
[data-bs-theme="dark"] .comms-status-pending { background: #451a03; color: #fbbf24; }
[data-bs-theme="dark"] .comms-status-cancelled { background: #450a0a; color: #fca5a5; }
.comms-pledge-meta {
    font-size: 0.68rem; color: var(--ako-text-secondary);
}
.comms-email-list {
    border-top: 1px solid var(--ako-border); padding-top: 8px;
}
.comms-email-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 0.8rem;
}
.comms-email-row i { font-size: 0.85rem; min-width: 16px; }
.comms-email-label { flex: 1; }
.comms-email-status {
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}

/* Comms Broadcasts */
.comms-section-header {
    font-size: 0.78rem; font-weight: 700; color: var(--ako-text-secondary);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.comms-broadcast-card {
    background: var(--ako-surface); border: 1px solid var(--ako-border);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
    border-left: 3px solid #6366f1;
}
[data-bs-theme="dark"] .comms-broadcast-card {
    border-left-color: #818cf8;
}
.comms-broadcast-header {
    display: flex; align-items: center; gap: 8px;
}
.comms-broadcast-icon {
    width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
    background: var(--ako-hover); color: var(--ako-primary);
}
[data-bs-theme="dark"] .comms-broadcast-icon {
    background: #312e81; color: #a5b4fc;
}
.comms-broadcast-video {
    background: #fef3c7; color: #d97706;
}
[data-bs-theme="dark"] .comms-broadcast-video {
    background: #451a03; color: #fbbf24;
}
.comms-broadcast-badge {
    font-size: 0.72rem; font-weight: 600;
}
.comms-broadcast-footer {
    font-size: 0.72rem; color: var(--ako-text-secondary);
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--ako-border);
}

/* ===== WALL OF SUPPORT ===== */
.wall-section-header {
    font-size: 0.82rem; font-weight: 600; color: var(--ako-text-secondary);
}
.wall-message-card {
    border: 1px solid var(--ako-border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--ako-card-bg);
    transition: border-color 0.2s;
}
.wall-message-pending {
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
}
.wall-message-approved {
    border-left: 3px solid #10b981;
}
.wall-avatar {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
    color: #fff;
}
.wall-avatar-pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.wall-avatar-approved {
    background: linear-gradient(135deg, #10b981, #059669);
}
[data-bs-theme="dark"] .wall-message-card {
    background: var(--ako-card-bg);
}
[data-bs-theme="dark"] .wall-message-pending {
    background: #1c1a11;
    border-left-color: #d97706;
}
[data-bs-theme="dark"] .wall-message-approved {
    border-left-color: #059669;
}

/* ===== TRIPS ===== */
.trips-area, .trip-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 90px;
}

/* Trip Cards */
.trip-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--soft-shadow);
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    overflow: hidden;
}
.trip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.trip-card:active {
    transform: scale(0.98);
}
.trip-card .progress {
    background: var(--ako-border);
}

/* Trip Description in Detail (expandable) */
#tripDetailDesc {
    line-height: 1.5;
    transition: max-height 0.3s ease;
    position: relative;
}

/* Trip Status Chip */
.trip-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* Trip Detail Header - mobile compact */
.trip-detail-area .detail-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ako-surface);
    border-bottom: 1px solid var(--ako-border);
}

/* Trip Tabs - horizontal scroll */
#tripDetailTabs {
    border-bottom: 1px solid var(--ako-border);
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 8px !important;
}
#tripDetailTabs::-webkit-scrollbar { display: none; }
#tripDetailTabs .nav-link {
    font-size: 0.78rem;
    padding: 6px 14px;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.2s;
}
#tripDetailTabs .nav-link.active {
    background: #0d9488 !important;
    color: #fff !important;
    border-color: #0d9488 !important;
}
#tripDetailTabs .nav-link:not(.active):hover {
    background: rgba(13,148,136,0.08);
    color: #0d9488;
}

/* Trip Map */
.trip-map-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}
#tripMapEl {
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    background: #e5e7eb;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
@media (min-width: 768px) {
    #tripMapEl { height: 400px; }
}

/* Trip Map Toolbar */
.trip-map-toolbar {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.trip-map-toolbar::-webkit-scrollbar { display: none; }
.trip-map-toolbar .btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.76rem;
}

/* Route Point Cards (origin/destination) */
.trip-route-point {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.trip-route-point .route-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* GPS Tracking Marker (Offline Map) */
.trip-gps-marker {
    background: transparent !important;
    border: none !important;
}
.trip-gps-dot {
    width: 16px;
    height: 16px;
    background: #4285f4;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(66,133,244,0.6);
    position: relative;
}
.trip-gps-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: rgba(66,133,244,0.2);
    animation: tripGpsPulse 2s ease-out infinite;
}
@keyframes tripGpsPulse {
    0%   { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* Numbered stop markers */
.trip-custom-marker {
    background: transparent !important;
    border: none !important;
}
.trip-marker-numbered {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.trip-marker-flag {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.trip-marker-start { color: #198754; }
.trip-marker-end   { color: #dc3545; }

/* Tracking HUD */
.trip-tracking-hud {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 0.82rem;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Live Map */
#tripLiveMapEl {
    width: 100%;
    height: 350px;
    border-radius: 16px;
    overflow: hidden;
    background: #e5e7eb;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
@media (min-width: 768px) {
    #tripLiveMapEl { height: 450px; }
}

/* Calibrate Results */
.trip-calibrate-results {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Route Summary Card */
.trip-route-summary {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    border: 1px solid #99f6e4;
    border-radius: 14px;
    padding: 12px 16px;
}

/* Stop Timeline */
.stop-timeline-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ako-border);
    position: relative;
    transition: background 0.15s;
}
.stop-timeline-item:last-child {
    border-bottom: none;
}
.stop-timeline-item.done {
    opacity: 0.55;
}
.stop-timeline-item:active {
    background: rgba(13,148,136,0.04);
    border-radius: 12px;
}
.stop-timeline-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.stop-timeline-icon i {
    font-size: 0.85rem;
}
.stop-timeline-content .btn-xs {
    padding: 2px 6px;
    font-size: 0.72rem;
    border-radius: 8px;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Trip Filter buttons */
.trip-filter-btn {
    transition: all 0.2s;
}
.trip-filter-btn.active {
    background: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #fff !important;
}

/* Trip Tile Progress */
.trip-tile-progress {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 10px 14px;
}

/* Mobile stop card swipe hint */
@media (max-width: 575.98px) {
    .trip-detail-area .px-3 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    #tripMapEl { height: 240px; border-radius: 12px; }
    #tripLiveMapEl { height: 280px; border-radius: 12px; }
    .stop-timeline-icon { width: 32px; height: 32px; }
    .stop-timeline-icon i { font-size: 0.75rem; }
    .stop-timeline-content .btn-xs {
        min-width: 32px;
        min-height: 32px;
    }
    #tripDetailTabs .nav-link { font-size: 0.72rem; padding: 5px 10px; }
}

/* ===== SHOP ===== */
.shop-area, .shop-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}

.shop-header {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.shop-header h5 {
    font-size: 1.1rem;
}

/* Shop Cards */
.shop-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--soft-shadow);
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.shop-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.shop-card-image {
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-card-image .placeholder-icon {
    font-size: 2rem;
    color: #a5b4fc;
}

.shop-card-body {
    padding: 14px 16px;
}

.shop-card-body h6 {
    font-size: 0.95rem;
    line-height: 1.3;
}

.shop-card-stats {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* Shop Detail */
.shop-detail-header {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.shop-detail-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.shop-detail-stats .stat-item {
    text-align: center;
    min-width: 60px;
}

.shop-detail-stats .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.shop-detail-stats .stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Shop Product Rows */
.shop-product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--soft-shadow);
    margin-bottom: 8px;
    transition: transform 0.12s;
}

.shop-product-row:hover {
    transform: translateX(2px);
}

.shop-product-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.shop-product-name {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-product-price {
    font-weight: 700;
    color: var(--ako-primary);
    font-size: 0.85rem;
}

.shop-product-meta {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Shop Order Rows */
.shop-order-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--soft-shadow);
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.12s;
}

.shop-order-row:hover {
    transform: translateX(2px);
}

.shop-order-status-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

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

.shop-order-ref {
    font-weight: 600;
    font-size: 0.88rem;
}

.shop-order-meta {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.shop-order-total {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    text-align: right;
}

/* Shop Discount Rows */
.shop-discount-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--soft-shadow);
    margin-bottom: 8px;
}

.shop-discount-code {
    font-weight: 700;
    font-size: 0.95rem;
    font-family: 'Courier New', monospace;
    color: var(--ako-primary);
    background: #eef2ff;
    padding: 4px 10px;
    border-radius: 8px;
}

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

.shop-discount-value {
    font-weight: 600;
    font-size: 0.85rem;
}

.shop-discount-meta {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Shop Tabs */
.shop-tabs .nav-link {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    border-radius: 0;
}

.shop-tabs .nav-link.active {
    color: var(--ako-primary);
    border-bottom-color: var(--ako-primary);
    background: transparent;
}

/* ===== SW UPDATE BANNER ===== */
.sw-update-banner {
    background: linear-gradient(135deg, var(--ako-primary), var(--ako-primary-dark, #4a3bbf));
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 1060;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    animation: swSlideDown 0.3s ease-out;
}

.sw-update-banner button {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    padding: 2px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.2s;
}

.sw-update-banner button:hover {
    background: rgba(255,255,255,0.35);
}

@keyframes swSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ===== OFFLINE BANNER ===== */
.offline-banner {
    background: var(--ako-warning);
    color: #1a1a1a;
    text-align: center;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 100;
}

.offline-banner i {
    font-size: 0.9rem;
}

.offline-sync-icon {
    font-size: 0.7rem;
    color: var(--ako-warning);
    margin-left: 5px;
    opacity: 0.85;
    animation: offlinePulse 2s ease-in-out infinite;
}

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

/* ===== iOS SAFE AREA — notched devices ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    .app-topbar {
        padding-top: max(12px, env(safe-area-inset-top));
    }

    .bottom-bar {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .install-banner {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

/* ===== Admin user row hover ===== */
.admin-user-row {
    transition: background 0.15s;
}
.admin-user-row:hover {
    background: #f3f4f6;
}

/* ===== INVOICE ===== */
.invoice-area, .invoice-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Invoice section header */
.invoice-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    gap: 8px;
}
.invoice-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e1b4b;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.invoice-section-title .inv-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: linear-gradient(135deg, var(--ako-primary), var(--ako-purple));
    color: white;
    box-shadow: 0 4px 12px rgba(79,70,229,0.3);
    flex-shrink: 0;
}

/* Stats row */
.invoice-stats {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 16px 8px;
    scrollbar-width: none;
}
.invoice-stats::-webkit-scrollbar { display: none; }
.invoice-stat-card {
    flex: 1 0 0;
    min-width: 0;
    background: white;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}
.invoice-stat-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1e1b4b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.invoice-stat-card.stat-overdue .invoice-stat-value { color: #ef4444; }
.invoice-stat-card.stat-paid .invoice-stat-value { color: #059669; }
.invoice-stat-label {
    font-size: 0.6rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 1px;
    white-space: nowrap;
}

/* Filter bar */
.invoice-filter-bar {
    display: flex;
    gap: 6px;
    padding: 0 16px 10px;
    align-items: center;
}
.invoice-filter-bar select {
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    font-size: 0.78rem;
    padding: 6px 10px;
    background: white;
    font-weight: 500;
    min-width: 90px;
    flex-shrink: 0;
}
.invoice-filter-bar select:focus {
    border-color: #818CF8;
    box-shadow: 0 0 0 3px rgba(129,140,248,0.15);
}
.invoice-filter-bar input {
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    font-size: 0.78rem;
    padding: 6px 10px;
    background: white;
}
.invoice-filter-bar input:focus {
    border-color: #818CF8;
    box-shadow: 0 0 0 3px rgba(129,140,248,0.15);
}

/* Invoice list card */
.invoice-card {
    background: white;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid #f0f0f5;
    position: relative;
    overflow: hidden;
}
.invoice-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}
.invoice-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
    border-color: #e0e7ff;
}
.invoice-card:active {
    transform: scale(0.99);
}
.invoice-card.status-draft::after { background: #9ca3af; }
.invoice-card.status-sent::after { background: #3b82f6; }
.invoice-card.status-viewed::after { background: #8b5cf6; }
.invoice-card.status-partially_paid::after { background: #f59e0b; }
.invoice-card.status-paid::after { background: #10b981; }
.invoice-card.status-overdue::after { background: #ef4444; }
.invoice-card.status-cancelled::after { background: #d1d5db; }

.invoice-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.invoice-card-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    background: #f3f4f6;
    color: #6b7280;
}
.invoice-card.status-sent .invoice-card-avatar { background: #eff6ff; color: #2563eb; }
.invoice-card.status-viewed .invoice-card-avatar { background: #f5f3ff; color: var(--ako-purple); }
.invoice-card.status-partially_paid .invoice-card-avatar { background: #fffbeb; color: #d97706; }
.invoice-card.status-paid .invoice-card-avatar { background: #ecfdf5; color: #059669; }
.invoice-card.status-overdue .invoice-card-avatar { background: #fef2f2; color: #dc2626; }

.invoice-card-info {
    flex: 1;
    min-width: 0;
}
.invoice-card-number {
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.2px;
}
.invoice-card-client {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e1b4b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.invoice-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-left: 44px;
    min-width: 0;
}
.invoice-card-amount {
    font-size: 0.92rem;
    font-weight: 800;
    color: #1e1b4b;
    white-space: nowrap;
}
.invoice-card-meta {
    text-align: right;
    flex-shrink: 0;
}
.invoice-card-due {
    font-size: 0.65rem;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}
.invoice-card.status-overdue .invoice-card-due {
    color: #ef4444;
    font-weight: 600;
}

/* Progress bar on card for partial payment */
.invoice-card-progress {
    margin-top: 6px;
    padding-left: 44px;
}
.invoice-card-progress-track {
    height: 3px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
}
.invoice-card-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #10b981, #34d399);
    transition: width 0.4s ease;
}
.invoice-card-progress-text {
    font-size: 0.6rem;
    color: #6b7280;
    margin-top: 2px;
    text-align: right;
}

/* Status badges */
.invoice-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.inv-badge-draft { background: #f3f4f6; color: #6b7280; }
.inv-badge-sent { background: #dbeafe; color: #1d4ed8; }
.inv-badge-viewed { background: #ede9fe; color: var(--ako-purple); }
.inv-badge-partially_paid { background: #fef3c7; color: #92400e; }
.inv-badge-paid { background: #d1fae5; color: #065f46; }
.inv-badge-overdue { background: #fee2e2; color: #991b1b; }
.inv-badge-cancelled { background: #f3f4f6; color: #9ca3af; }

/* Detail view */
.invoice-detail-card {
    background: white;
    border-radius: 16px;
    padding: 16px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    margin-bottom: 12px;
    border: 1px solid #f0f0f5;
    overflow: hidden;
}
.invoice-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
    gap: 8px;
}
.invoice-detail-number {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e1b4b;
    word-break: break-word;
}
.invoice-detail-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.invoice-detail-party {
    background: #fafafe;
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid #f0f0f5;
    overflow: hidden;
    min-width: 0;
}
.invoice-detail-party .fw-bold {
    font-size: 0.85rem;
    word-break: break-word;
}
.invoice-detail-party .small {
    font-size: 0.75rem;
    word-break: break-all;
}
.invoice-detail-party-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ako-primary);
    margin-bottom: 4px;
}
@media (max-width: 400px) {
    .invoice-detail-parties { grid-template-columns: 1fr; }
    .invoice-detail-card { padding: 14px 12px; }
    .invoice-detail-number { font-size: 1rem; }
}

/* Detail table — horizontal scroll on small screens */
.invoice-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px 16px;
    padding: 0 14px;
}
@media (max-width: 400px) {
    .invoice-table-wrap { margin: 0 -12px 16px; padding: 0 12px; }
}
.invoice-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 340px;
}
.invoice-detail-table thead th {
    background: #f8f9ff;
    color: var(--ako-primary);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 8px;
    border-bottom: 2px solid #e0e7ff;
    white-space: nowrap;
}
.invoice-detail-table tbody td {
    padding: 8px 8px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    font-size: 0.78rem;
}
.invoice-detail-table tbody tr:last-child td { border-bottom: none; }
.invoice-detail-table .text-end { text-align: right; }

.invoice-detail-totals {
    background: #fafafe;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #e0e7ff;
}
.invoice-total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.82rem;
    color: #374151;
    gap: 12px;
}
.invoice-total-row span:last-child {
    white-space: nowrap;
    text-align: right;
}
.invoice-total-row.grand {
    font-size: 1rem;
    font-weight: 800;
    color: #1e1b4b;
    border-top: 2px solid #c7d2fe;
    padding-top: 10px;
    margin-top: 6px;
}

/* Detail action buttons */
.invoice-detail-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.invoice-detail-actions .btn {
    border-radius: 8px;
    font-size: 0.75rem;
    padding: 5px 8px;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 400px) {
    .invoice-detail-actions .inv-act-label { display: none; }
    .invoice-detail-actions .btn { padding: 5px 7px; }
}

/* Payment history */
.invoice-payment-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    font-size: 0.78rem;
}
.invoice-payment-card:hover { box-shadow: 0 4px 12px rgba(16,185,129,0.1); }
.invoice-payment-card .payment-ref {
    font-weight: 700;
    color: #1e1b4b;
}
.invoice-payment-card .payment-date {
    font-size: 0.68rem;
    color: #6b7280;
}

/* Invoice empty state */
.invoice-empty {
    text-align: center;
    padding: 48px 24px;
}
.invoice-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ako-hover), #E0E7FF);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 2rem;
    color: var(--ako-primary);
}

/* Line item row in modal */
.invoice-item-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.invoice-item-row input {
    font-size: 0.78rem;
}
.invoice-item-row .item-desc { flex: 3; min-width: 120px; }
.invoice-item-row .item-qty { flex: 1; min-width: 50px; }
.invoice-item-row .item-price { flex: 1; min-width: 70px; }
.invoice-item-row .item-remove {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #fee2e2;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.invoice-item-row .item-remove:hover { background: #ef4444; color: white; }

/* ===== QUOTES ===== */
.quote-area, .quote-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 100px;
}

/* Quote section header */
.quote-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    gap: 8px;
}
.quote-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0c4a6e;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.quote-section-title .qte-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    box-shadow: 0 4px 12px rgba(14,165,233,0.3);
    flex-shrink: 0;
}

/* Quote stats row */
.quote-stats {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 16px 8px;
    scrollbar-width: none;
}
.quote-stats::-webkit-scrollbar { display: none; }

/* Quote stats pills */
.quote-stat-pill {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    border-radius: 14px;
    padding: 9px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}
.quote-stat-pill.qte-stat-accepted {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}
.qte-stat-num {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1e1b4b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qte-stat-label {
    font-size: 0.56rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 1px;
}

/* Quote filter bar */
.quote-filter-bar {
    display: flex;
    gap: 6px;
    padding: 0 16px 10px;
    align-items: center;
}
.quote-filter-bar select {
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    font-size: 0.78rem;
    padding: 6px 10px;
    background: white;
    font-weight: 500;
    min-width: 90px;
    flex-shrink: 0;
}
.quote-filter-bar select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56,189,248,0.15);
}
.quote-filter-bar input {
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    font-size: 0.78rem;
    padding: 6px 10px;
    background: white;
}
.quote-filter-bar input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56,189,248,0.15);
}

/* Quote list card */
.quote-card {
    background: white;
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid #f0f0f5;
    position: relative;
    overflow: hidden;
}
.quote-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}
.quote-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
    border-color: #e0f2fe;
}
.quote-card:active { transform: scale(0.99); }
.qte-card-draft::after { background: #9ca3af; }
.qte-card-sent::after { background: #0ea5e9; }
.qte-card-viewed::after { background: #8b5cf6; }
.qte-card-accepted::after { background: #10b981; }
.qte-card-declined::after { background: #ef4444; }
.qte-card-expired::after { background: #f59e0b; }

/* Quote status badges */
.quote-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.qte-badge-draft { background: #f3f4f6; color: #6b7280; }
.qte-badge-sent { background: #e0f2fe; color: #0369a1; }
.qte-badge-viewed { background: #ede9fe; color: #7c3aed; }
.qte-badge-accepted { background: #d1fae5; color: #065f46; }
.qte-badge-declined { background: #fee2e2; color: #991b1b; }
.qte-badge-expired { background: #fef3c7; color: #92400e; }

/* Quote detail card */
.quote-detail-card {
    background: white;
    border-radius: 16px;
    padding: 16px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    margin-bottom: 12px;
    border: 1px solid #f0f0f5;
    overflow: hidden;
}
.quote-detail-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 340px;
    margin-bottom: 16px;
}
.quote-detail-table thead th {
    background: #f0f9ff;
    color: #0284c7;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 8px;
    border-bottom: 2px solid #bae6fd;
    white-space: nowrap;
}
.quote-detail-table tbody td {
    padding: 8px 8px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    font-size: 0.78rem;
    word-break: break-word;
}
.quote-detail-table tbody tr:last-child td { border-bottom: none; }
.quote-detail-table .text-end { text-align: right; }

.quote-detail-totals {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #bae6fd;
}

/* Quote detail action buttons */
.quote-detail-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.quote-detail-actions .btn {
    border-radius: 8px;
    font-size: 0.75rem;
    padding: 5px 8px;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 400px) {
    .quote-detail-actions .qte-act-label { display: none; }
    .quote-detail-actions .btn { padding: 5px 7px; }
}

/* Quote empty state */
.quote-empty {
    text-align: center;
    padding: 48px 24px;
}

/* Quote item row in modal */
.quote-item-row input { font-size: 0.78rem; }

/* ===== DIRECTORY (CONTACTS) ===== */
.directory-area, .directory-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 100px;
}

.directory-header {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.directory-header h5 {
    font-size: 1.1rem;
}

/* Instagram-style grid */
.directory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.directory-tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    transition: transform 0.15s;
}

.directory-tile:hover {
    transform: scale(1.03);
}

.directory-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.directory-tile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    color: #fff;
}

.directory-tile-name {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.directory-tile-meta {
    font-size: 0.6rem;
    opacity: 0.85;
}

.directory-tile-badges {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 3px;
}

.directory-tile-badges .badge {
    font-size: 0.55rem;
    padding: 2px 5px;
}

.directory-tile-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

/* Detail view */
.directory-detail-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #e0e7ff, #818cf8);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.directory-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.directory-detail-avatar .initials {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

/* Files grid */
.directory-files-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.directory-file-tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f5f9;
    cursor: pointer;
    transition: transform 0.15s;
}

.directory-file-tile:hover {
    transform: scale(1.03);
}

.directory-file-tile img,
.directory-file-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.directory-file-tile .file-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.5rem;
}

.directory-file-tile .file-icon-placeholder span {
    font-size: 0.55rem;
    margin-top: 4px;
    text-align: center;
    word-break: break-all;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-file-tile .file-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239,68,68,0.85);
    color: #fff;
    border: none;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.directory-file-tile:hover .file-delete-btn {
    opacity: 1;
}

.directory-detail-tabs-wrap {
    display: inline-flex;
    gap: 8px;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 4px;
}

.directory-detail-tab {
    border: none;
    background: transparent;
    color: #475569;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.22s ease;
}

.directory-detail-tab.active {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.2);
}

.directory-tab-badge {
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 0.68rem;
}

.btn-teal {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    border: none;
}

.btn-teal:hover,
.btn-teal:focus {
    color: #fff;
    filter: brightness(0.96);
}

/* ---- Directory Inbox: Chatbot UI ---- */

/* Invite card (collapsible) */
.dir-invite-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.dir-invite-card.open {
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.08);
}
.dir-invite-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: #f8fafc;
    padding: 9px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.18s;
}
.dir-invite-toggle:hover { background: #f1f5f9; }
.dir-invite-toggle .bi-chevron-down {
    margin-left: auto;
    font-size: 0.68rem;
    transition: transform 0.22s ease;
}
.dir-invite-card.open .dir-invite-toggle .bi-chevron-down {
    transform: rotate(180deg);
}
.dir-invite-body {
    display: none;
    padding: 10px 12px 12px;
    gap: 8px;
}
.dir-invite-card.open .dir-invite-body {
    display: grid;
}
.dir-invite-body .form-control {
    font-size: 0.8rem;
    border-radius: 10px;
}
.dir-invite-body .btn-teal {
    font-size: 0.78rem;
    padding: 7px 14px;
    border-radius: 999px;
}

/* Filter pills */
.directory-inbox-filter-wrap {
    display: inline-flex;
    gap: 2px;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 3px;
}
.directory-inbox-filter {
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.7rem;
    font-weight: 700;
    transition: all 0.18s ease;
    cursor: pointer;
}
.directory-inbox-filter:hover { color: #334155; }
.directory-inbox-filter.active {
    background: #0f766e;
    color: #fff;
    box-shadow: 0 2px 6px rgba(15, 118, 110, 0.18);
}

/* Conversation list */
.directory-conversation-list {
    display: grid;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.directory-conversation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    padding: 8px 10px;
    transition: all 0.15s ease;
    cursor: pointer;
    width: 100%;
}
.directory-conversation-item:hover {
    background: #f0fdfa;
}
.directory-conversation-item.active {
    background: #f0fdfa;
    box-shadow: inset 3px 0 0 #0f766e;
}
.dir-conv-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.dir-conv-body {
    flex: 1;
    min-width: 0;
}
.dir-conv-top {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dir-conv-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.dir-conv-time {
    font-size: 0.64rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}
.dir-conv-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}
.dir-conv-preview {
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.dir-conv-unread {
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0f766e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    flex-shrink: 0;
}
.dir-conv-archived {
    font-size: 0.6rem;
    color: #94a3b8;
    font-style: italic;
}

/* Empty state */
.dir-chat-empty-state {
    text-align: center;
    padding: 28px 14px;
    color: #94a3b8;
}
.dir-chat-empty-state i {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
    opacity: 0.5;
}
.dir-chat-empty-state div {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
}
.dir-chat-empty-state small {
    font-size: 0.72rem;
}

/* Chat window (thread + composer unified) */
.dir-chat-window {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

/* Thread area */
.dir-chat-messages {
    background: #f8fafc;
    padding: 14px 12px;
    min-height: 200px;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.dir-chat-messages::-webkit-scrollbar { width: 5px; }
.dir-chat-messages::-webkit-scrollbar-track { background: transparent; }
.dir-chat-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* Message rows */
.directory-message-row {
    display: flex;
    margin-bottom: 6px;
    animation: directoryMsgIn 200ms ease;
}
.directory-message-row.outbound { justify-content: flex-end; }
.directory-message-row.inbound { justify-content: flex-start; }

/* Bubbles */
.directory-message-bubble {
    max-width: min(76%, 440px);
    padding: 8px 12px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}
.directory-message-row.outbound .directory-message-bubble {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}
.directory-message-row.inbound .directory-message-bubble {
    background: #fff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 16px 16px 16px 4px;
}

/* Sender label */
.dir-msg-sender {
    font-size: 0.66rem;
    font-weight: 700;
    margin-bottom: 2px;
    opacity: 0.7;
}
.directory-message-row.inbound .dir-msg-sender { color: #0f766e; }
.directory-message-row.outbound .dir-msg-sender { color: rgba(255,255,255,0.8); }

.directory-message-text {
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-line;
    word-wrap: break-word;
}
.directory-message-meta {
    margin-top: 3px;
    font-size: 0.62rem;
    opacity: 0.65;
    text-align: right;
}

/* Attachments */
.directory-message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.directory-attachment-item {
    display: flex;
    gap: 5px;
    align-items: center;
}
.directory-attachment-preview {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.3);
    flex-shrink: 0;
    display: inline-block;
}
.directory-attachment-preview img,
.directory-attachment-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.directory-attachment-preview video { background: #0f172a; }
.directory-attachment-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
.directory-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.66rem;
    text-decoration: none;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s;
}
.directory-attachment-chip:hover { opacity: 0.85; }
.directory-attachment-kind {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 999px;
    padding: 1px 5px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(255, 255, 255, 0.65);
    color: #334155;
}
.directory-message-row.inbound .directory-attachment-chip {
    color: #0f172a;
    background: #e2e8f0;
}
.directory-message-row.outbound .directory-attachment-chip {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.88);
}
.directory-attachment-jump {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(255, 255, 255, 0.7);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.7rem;
    transition: background 0.15s;
}
.directory-attachment-jump:hover { background: #e2e8f0; }

.directory-file-focus {
    animation: directoryFileFocus 1.15s ease;
}
@keyframes directoryFileFocus {
    0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.55); transform: translateY(0); }
    35% { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0.16); transform: translateY(-2px); }
    100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); transform: translateY(0); }
}

/* Composer bar */
.dir-chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border-top: 1px solid #f1f5f9;
}
.dir-chat-input {
    flex: 1;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 0.8rem;
    font-family: inherit;
    line-height: 1.4;
    resize: none;
    min-height: 36px;
    max-height: 100px;
    transition: border-color 0.15s;
    outline: none;
}
.dir-chat-input:focus {
    border-color: #14b8a6;
    background: #fff;
}
.dir-chat-action {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.88rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.dir-chat-action:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.dir-chat-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.82rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.22);
}
.dir-chat-send:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}
.dir-chat-send:disabled {
    opacity: 0.5;
    transform: none;
}

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

@media (max-width: 576px) {
    .dir-chat-messages { max-height: 300px; min-height: 160px; }
    .directory-message-bubble { max-width: 88%; }
    .dir-invite-body { padding: 8px 10px 10px; }
}

/* QR scanner overlay */
.qr-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border: 3px solid rgba(79, 70, 229, 0.7);
    border-radius: 16px;
    pointer-events: none;
}

/* ===== NOTES / JOURNAL ===== */
.notes-area, .note-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}

.notes-header h5 {
    font-size: 1.1rem;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.note-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(79,70,229,0.06);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border-left: 4px solid transparent;
    position: relative;
}

.note-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(79,70,229,0.12);
}

.note-card.pinned {
    border-left-color: #f59e0b;
}

.note-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e1b4b;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.note-card-title .pin-icon {
    color: #f59e0b;
    font-size: 0.75rem;
}

.note-card-preview {
    font-size: 0.82rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.note-card-meta {
    font-size: 0.7rem;
    color: #9ca3af;
}

/* Note detail editor */
.note-detail-area #noteDetailTitle {
    font-weight: 700;
    font-size: 1.3rem;
}

.note-detail-area #noteDetailTitle:focus,
.note-detail-area #noteDetailContent:focus {
    box-shadow: none;
    outline: none;
}

.note-detail-area #noteDetailContent {
    min-height: 300px;
    white-space: pre-wrap;
    word-break: break-word;
}

.note-detail-area #noteDetailContent.note-rich-editor:empty:before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

/* Note auto-save status indicator */
.note-save-status {
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s;
}
.note-save-status i { font-size: 0.8rem; }
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin-icon { animation: spin 1s linear infinite; display: inline-block; }

/* ── Note Markdown Toolbar ── */
.note-md-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--ako-surface, #f9fafb);
    border: 1px solid var(--ako-border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.note-md-toolbar::-webkit-scrollbar { display: none; }
.note-md-toolbar button,
.note-md-toolbar .note-md-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: #6b7280;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    padding: 0;
    flex-shrink: 0;
}
.note-md-toolbar button:hover,
.note-md-toolbar .note-md-btn:hover {
    background: rgba(79,70,229,0.08);
    color: #4f46e5;
}
.note-md-toolbar button:active,
.note-md-toolbar .note-md-btn:active {
    background: rgba(79,70,229,0.15);
    color: #4338ca;
}
.note-md-sep {
    width: 1px;
    height: 18px;
    background: var(--ako-border, #e5e7eb);
    margin: 0 3px;
    flex-shrink: 0;
}
[data-bs-theme="dark"] .note-md-toolbar {
    background: #1f2937;
    border-color: #374151;
}
[data-bs-theme="dark"] .note-md-toolbar button,
[data-bs-theme="dark"] .note-md-toolbar .note-md-btn {
    color: #9ca3af;
}
[data-bs-theme="dark"] .note-md-toolbar button:hover,
[data-bs-theme="dark"] .note-md-toolbar .note-md-btn:hover {
    background: rgba(129,140,248,0.12);
    color: #818cf8;
}
[data-bs-theme="dark"] .note-md-sep {
    background: #374151;
}

/* ── Note File Attachments ── */
.note-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.note-file-card {
    position: relative;
    background: var(--ako-surface, #f9fafb);
    border: 1px solid var(--ako-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.12s;
}
.note-file-card:hover {
    box-shadow: 0 2px 10px rgba(79,70,229,0.10);
    transform: translateY(-1px);
}
.note-file-thumb {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
    background: #f3f4f6;
}
.note-file-icon {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #9ca3af;
    background: #f3f4f6;
}
[data-bs-theme="dark"] .note-file-icon {
    background: #1f2937;
    color: #6b7280;
}
.note-file-info {
    padding: 6px 8px;
}
.note-file-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ako-text, #1e1b4b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.note-file-size {
    font-size: 0.62rem;
    color: #9ca3af;
}
.note-file-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
}
.note-file-card:hover .note-file-delete {
    opacity: 1;
}

/* ===== FAMILY HUB ===== */
.family-area, .family-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 100px;
}

/* --- Family List Header --- */
.family-list-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.family-list-header h5 {
    font-size: 1.1rem;
    color: #059669;
}

/* --- Family Group Cards (List View) --- */
.family-group-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.family-group-card:active {
    transform: scale(0.98);
}
.family-group-card-cover {
    height: 80px;
    background: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 1.8rem;
}
.family-group-card-body {
    padding: 12px 14px;
}
.family-group-card-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.family-group-card-meta {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
}
.family-group-card-meta i {
    font-size: 0.7rem;
}
.family-group-preview {
    font-size: 0.76rem;
    color: #9ca3af;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.family-role-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}
.family-role-badge.owner { background: #dcfce7; color: #059669; }
.family-role-badge.admin { background: #dbeafe; color: #2563eb; }
.family-role-badge.private { background: #f3f4f6; color: #6b7280; }

/* --- Family Invite Cards --- */
.family-invite-header {
    font-weight: 700;
    font-size: 0.85rem;
    color: #059669;
    margin-bottom: 8px;
    padding-top: 4px;
}
.family-invite-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    margin-bottom: 8px;
    gap: 12px;
}
.family-invite-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.family-invite-info strong { font-size: 0.88rem; }
.family-invite-info .text-muted { font-size: 0.75rem; }

/* --- Family Detail Cover Section --- */
.family-cover-section {
    position: relative;
    width: 100%;
}
.family-cover-image {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%);
    background-size: cover;
    background-position: center;
    position: relative;
}
.family-cover-image.has-image .family-cover-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 30%, rgba(0,0,0,0.6) 100%);
}
.family-cover-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 40%, rgba(5,150,105,0.4) 100%);
}
.family-back-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.family-back-btn:hover, .family-back-btn:active {
    background: rgba(0,0,0,0.55);
    color: white;
}
.family-cover-info {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    z-index: 2;
    color: white;
}
.family-cover-title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    margin: 0;
}
.family-cover-meta {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.family-cover-desc {
    font-size: 0.76rem;
    opacity: 0.85;
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Family Action Bar --- */
.family-action-bar {
    background: white;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 16px;
}
.family-action-bar-inner {
    display: flex;
    gap: 8px;
}
.family-action-btn {
    font-size: 0.76rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    color: #374151;
    background: white;
    transition: background 0.15s;
}
.family-action-btn:hover, .family-action-btn:active {
    background: #f9fafb;
    color: #111827;
}
.family-action-btn i {
    font-size: 0.72rem;
}
.family-action-btn-danger {
    color: #ef4444;
    border-color: #fecaca;
}
.family-action-btn-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* --- Family Tab Bar --- */
.family-tab-bar {
    display: flex;
    gap: 0;
    margin: 0 -12px;
    padding: 0 12px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.family-tab-bar::-webkit-scrollbar { display: none; }
.family-tab {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    border: none;
    background: none;
    font-size: 0.76rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    text-align: center;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.family-tab i {
    font-size: 1rem;
}
.family-tab span {
    font-size: 0.7rem;
}
.family-tab.active {
    color: #059669;
    border-bottom-color: #059669;
    font-weight: 600;
}
.family-tab:hover { color: #059669; }

/* --- Family Compose Box --- */
.family-compose-box {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.family-compose-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.family-compose-content {
    flex: 1;
    min-width: 0;
}
.family-compose-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.family-compose-tabs::-webkit-scrollbar { display: none; }
.family-compose-tabs button {
    border: none;
    background: #f3f4f6;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    color: #6b7280;
    white-space: nowrap;
    transition: all 0.15s;
}
.family-compose-tabs button.active {
    background: #dcfce7;
    color: #059669;
    font-weight: 600;
}
.family-compose-tabs button i {
    font-size: 0.72rem;
}
.family-compose-textarea {
    border: none !important;
    padding: 0 !important;
    font-size: 0.88rem;
    resize: none;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 40px;
}
.family-compose-textarea:focus {
    outline: none;
    box-shadow: none !important;
}
.family-compose-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f5f5f5;
}
.family-compose-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.85rem;
}
.family-compose-attach-btn:hover {
    background: #e5e7eb;
}

/* --- Family Post Cards --- */
.family-post-card {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.family-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 0;
}
.family-post-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.family-post-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.family-post-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid white;
    pointer-events: none;
}
.family-post-author-info {
    flex: 1;
    min-width: 0;
}
.family-post-author {
    font-weight: 600;
    font-size: 0.88rem;
    color: #111827;
}
.family-post-time {
    font-size: 0.72rem;
    color: #9ca3af;
}
.family-post-menu-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1rem;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.15s;
}
.family-post-menu-btn:hover {
    background: #f3f4f6;
}
.family-post-content {
    padding: 10px 14px 0;
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1f2937;
}
.family-post-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 3px;
    margin-top: 10px;
}
.family-post-media.single {
    grid-template-columns: 1fr;
}
.family-post-media img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    cursor: pointer;
}
.family-post-media.single img {
    max-height: 400px;
}
.family-post-media video {
    width: 100%;
    max-height: 400px;
    border-radius: 0;
    background: #000;
    display: block;
}
.family-post-media.single video {
    max-height: 500px;
    object-fit: contain;
}

/* --- Video Wrapper with Play Overlay --- */
.family-video-wrapper {
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.family-video-wrapper video {
    width: 100%;
    display: block;
}
.family-video-play-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    cursor: pointer;
    transition: background 0.2s;
}
.family-video-play-overlay:hover {
    background: rgba(0,0,0,0.35);
}
.family-video-play-overlay i {
    font-size: 3rem;
    color: rgba(255,255,255,0.9);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.family-post-file-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.78rem;
    color: #374151;
    background: #f3f4f6;
    border-radius: 8px;
    text-decoration: none;
    margin: 10px 14px 0;
}
.family-post-file-link:hover { background: #e5e7eb; }
.family-post-reaction-summary {
    padding: 6px 14px 0;
    font-size: 0.78rem;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    display: block;
    width: fit-content;
    transition: color 0.15s;
}
.family-post-reaction-summary:hover { color: #374151; }
.reaction-popover {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 10px 14px;
    min-width: 160px;
    max-width: 240px;
    z-index: 9999;
    font-size: 0.82rem;
}
.reaction-popover-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.reaction-popover-group:last-child { margin-bottom: 0; }
.reaction-popover-emoji { font-size: 1rem; flex-shrink: 0; line-height: 1.4; }
.reaction-popover-names { color: #374151; line-height: 1.4; }
[data-bs-theme="dark"] .reaction-popover {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .reaction-popover-names { color: #cbd5e1; }
[data-bs-theme="dark"] .family-post-reaction-summary { color: #94a3b8; }
[data-bs-theme="dark"] .family-post-reaction-summary:hover { color: #e2e8f0; }
.family-post-actions {
    display: flex;
    border-top: 1px solid #f0f0f0;
    margin: 8px 0 0;
}
.family-post-action-btn {
    flex: 1;
    border: none;
    background: none;
    padding: 10px 4px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s;
}
.family-post-action-btn:hover { background: #f9fafb; }
.family-post-action-btn.active { color: #059669; font-weight: 600; }
.family-post-action-btn i { font-size: 0.88rem; }

/* --- Family Comments --- */
.family-comments-area {
    padding: 0;
    border-top: 1px solid #f0f0f0;
}
.family-comments-list {
    padding: 10px 14px 4px;
    max-height: 300px;
    overflow-y: auto;
}
.family-comment-item {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: flex-start;
}
.family-comment-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d1d5db, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    flex-shrink: 0;
    color: #6b7280;
}
.family-comment-bubble {
    background: #f3f4f6;
    border-radius: 14px;
    padding: 6px 10px;
    flex: 1;
    min-width: 0;
}
.family-comment-name, .family-comment-author {
    font-weight: 600;
    font-size: 0.75rem;
    color: #111827;
    margin-right: 6px;
}
.family-comment-text {
    font-size: 0.78rem;
    color: #374151;
    word-break: break-word;
}
.family-comment-time {
    font-size: 0.6rem;
    color: #9ca3af;
    margin-top: 2px;
}
.family-comment-input {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 0.78rem;
    outline: none;
    background: #fafafa;
    transition: border-color 0.15s;
    min-width: 0;
}
.family-comment-input:focus {
    border-color: #10B981;
    background: white;
}
.family-comment-send-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #059669;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s;
}
.family-comment-send-btn:hover {
    background: #047857;
}
.family-comment-send-btn i {
    font-size: 0.65rem;
}
.family-comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    margin-top: 2px;
}
.family-comment-meta span {
    font-size: 0.6rem;
    color: #9ca3af;
}
.family-comment-delete-btn {
    border: none;
    background: none;
    color: #d1d5db;
    font-size: 0.7rem;
    padding: 0 2px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
}
.family-comment-delete-btn:hover {
    color: #ef4444;
}
.family-comment-input-row {
    display: flex;
    gap: 6px;
    padding: 6px 14px 10px;
    align-items: center;
}

/* --- Post Content Line Clamping --- */
.family-post-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    max-height: 7.75em; /* ~5 lines at 1.55 line-height */
}
.family-see-more-label {
    display: none;
}
.family-post-clamped .family-see-more-label {
    display: inline;
    color: #059669;
    font-weight: 500;
    font-size: 0.82rem;
}

/* --- Post Menu Dropdown --- */
.family-post-menu-wrapper {
    position: relative;
}
.family-post-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 50;
    min-width: 140px;
    overflow: hidden;
}
.family-post-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: none;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #374151;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.family-post-dropdown button:hover {
    background: #f3f4f6;
}
.family-post-dropdown button i {
    font-size: 0.85rem;
    color: #6b7280;
}

/* --- Reaction Picker --- */
.family-reaction-group {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.family-reaction-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 4px 6px;
    display: flex;
    gap: 2px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 40;
}
.family-reaction-picker.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}
.family-reaction-pick {
    border: none;
    background: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 16px;
    transition: transform 0.12s, background 0.12s;
    line-height: 1;
}
.family-reaction-pick:hover {
    transform: scale(1.25);
    background: #f3f4f6;
}
.family-reaction-pick.active {
    background: #dcfce7;
}

/* --- Lightbox Overlay --- */
.family-lightbox-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.family-lightbox-overlay img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}
.family-lightbox-close {
    position: absolute;
    top: 12px; right: 16px;
    color: white;
    font-size: 1.8rem;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    z-index: 10000;
    line-height: 1;
}
.family-lightbox-close:hover { opacity: 1; }

/* --- Delete Confirmation Overlay --- */
.family-delete-overlay, .family-edit-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.family-delete-card, .family-edit-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.family-delete-card h6 {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 8px;
}
.family-delete-card p {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 18px;
}
.family-edit-card h6 {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px;
    text-align: left;
}
.family-edit-card textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    resize: vertical;
    min-height: 100px;
    margin-bottom: 12px;
}
.family-edit-card textarea:focus {
    outline: none;
    border-color: #10B981;
}

/* --- Upload Progress Bar --- */
.family-upload-progress {
    height: 4px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0 2px;
}
.family-upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #059669, #10B981);
    border-radius: 4px;
    width: 0%;
    transition: width 0.2s;
}

/* --- Loading Skeleton --- */
.skeleton-pulse {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.4s infinite;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Pull-to-refresh indicator --- */
.family-pull-indicator {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.2s;
    color: #059669;
    font-size: 0.75rem;
}

.family-compose-input {
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    margin-bottom: 6px;
    background: #fafafa !important;
}
.family-compose-input:focus {
    border-color: #10B981 !important;
    background: white !important;
    box-shadow: none !important;
}
.family-compose-input[type="file"] {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
}
.family-compose-ai-btn {
    border-radius: 14px;
    font-size: 0.75rem;
    padding: 5px 14px;
}
.family-compose-mic-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.family-compose-mic-btn i {
    font-size: 1rem;
}

/* --- Family Post Submit Button --- */
.family-post-submit-btn {
    border-radius: 16px;
    font-size: 0.78rem;
    padding: 5px 14px;
    white-space: nowrap;
    min-width: 0;
}

/* --- Family Event Cards --- */
.family-event-card {
    padding: 12px 14px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.family-event-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.family-event-content {
    flex: 1;
    min-width: 0;
}
.family-event-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f5f5f5;
}
.family-event-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.family-event-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.15s;
}
.family-event-action-btn:hover {
    background: #f3f4f6;
    color: #6b7280;
}
.family-event-action-btn.delete:hover {
    background: #fef2f2;
    color: #ef4444;
}
.family-event-date-badge {
    background: linear-gradient(135deg, #059669, #10B981);
    color: white;
    border-radius: 10px;
    padding: 6px 10px;
    text-align: center;
    min-width: 44px;
    flex-shrink: 0;
}
.family-event-month {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.family-event-day {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}
.family-event-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.family-event-location {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
}
.family-event-location i { font-size: 0.7rem; }
.family-event-desc {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 3px;
}
.family-event-stats {
    font-size: 0.76rem;
    margin-top: 4px;
}
.family-event-stats .going { color: #059669; }
.family-event-stats .maybe { color: #d97706; }
.family-reminder-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    background: #eff6ff;
    color: #3b82f6;
}
.family-event-rsvp {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.family-rsvp-btn {
    border: 1px solid #e5e7eb;
    background: white;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 16px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.family-rsvp-btn:hover { border-color: #059669; color: #059669; }
.family-rsvp-btn.active { background: #059669; color: white; border-color: #059669; }
.family-rsvp-btn.maybe { background: #fef3c7; color: #d97706; border-color: #fde68a; }
.family-rsvp-btn.declined { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }
.family-rsvp-btn i { font-size: 0.7rem; }
@media (max-width: 400px) {
    .family-rsvp-btn { flex: 1; text-align: center; padding: 7px 6px; font-size: 0.7rem; }
}

/* --- Family Savings Cards --- */
.family-savings-card {
    padding: 12px 14px;
    background: white;
    border: 1px solid #f0f0f0;
    border-left: 3px solid #10b981;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.family-savings-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16,185,129,0.12);
    border-color: #10b981;
}
.family-savings-card:active {
    transform: scale(0.99);
}
.family-savings-card.savings-highlight {
    animation: savingsHighlight 1.5s ease;
}
@keyframes savingsHighlight {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
    40% { box-shadow: 0 0 0 8px rgba(16,185,129,0.15); }
    100% { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
}
.savings-complete-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 10px;
}
/* Savings Stats Header */
.family-savings-stats {
    display: flex;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid #d1fae5;
}
.family-savings-stats .stat-item {
    text-align: center;
    flex: 1;
}
.family-savings-stats .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #059669;
}
.family-savings-stats .stat-label {
    font-size: 0.68rem;
    color: #6b7280;
    margin-top: 1px;
}
/* Savings Detail Panel */
.savings-detail-panel {
    background: white;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    animation: slideUp 0.25s ease;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.savings-detail-header {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    padding: 20px 18px;
    text-align: center;
    position: relative;
}
.savings-detail-progress-ring {
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
    position: relative;
}
.savings-detail-actions {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap;
}
.savings-detail-actions .btn {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    border-radius: 10px;
    padding: 6px 10px;
}
.savings-detail-body {
    padding: 16px;
}
.savings-detail-contrib {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}
.savings-detail-contrib:last-child {
    border-bottom: none;
}
.savings-share-cta {
    background: #f0fdf4;
    border: 1px dashed #86efac;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    margin-top: 8px;
}
.savings-share-cta p {
    font-size: 0.82rem;
    color: #374151;
    margin-bottom: 8px;
}

/* --- Fund Contribute Section --- */
.savings-contribute-section {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-bottom: 1px solid #e5e7eb;
}
.savings-contribute-form {
    margin-top: 10px;
    animation: slideDown 0.25s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.savings-payment-tabs {
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d1d5db;
}
.savings-payment-tabs button {
    flex: 1;
    padding: 7px 8px;
    border: none;
    background: #f9fafb;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}
.savings-payment-tabs button.active {
    background: #059669;
    color: white;
}
.savings-payment-tabs button:first-child {
    border-right: 1px solid #d1d5db;
}

/* --- Family Member Cards --- */
.family-member-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 8px;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.family-member-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.family-member-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.family-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.88rem;
    flex-shrink: 0;
}
.family-member-details {
    min-width: 0;
    flex: 1;
}
.family-member-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.family-member-email {
    font-size: 0.74rem;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.family-member-badges {
    margin-top: 3px;
}
.family-member-role {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
}
.family-member-role.owner { background: #dcfce7; color: #059669; }
.family-member-role.admin { background: #dbeafe; color: #2563eb; }
.family-member-role.member { background: #f3f4f6; color: #6b7280; }
.family-member-role.invited { background: #fef3c7; color: #d97706; }
.family-member-actions {
    display: flex;
    align-items: center;
    flex-basis: 100%;
    gap: 8px;
    padding-left: 50px;
}
.family-member-role-select {
    font-size: 0.76rem;
    padding: 5px 28px 5px 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    -webkit-appearance: menulist;
    appearance: auto;
}
.family-member-role-select:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.1);
}
.family-member-remove-btn {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.family-member-remove-btn:hover {
    background: #fee2e2;
    border-color: #f87171;
}
.family-member-remove-btn i {
    font-size: 0.68rem;
    margin-right: 2px;
}

.family-detail-header {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: var(--ako-card-bg);
}

/* Contact input method buttons — compact on mobile */
#contactInputMethods .btn {
    font-size: 0.72rem;
    padding: 0.3rem 0.4rem;
}
#contactInputMethods .btn i {
    font-size: 0.8rem;
}

@media (max-width: 576px) {
    .directory-header .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }

    #createContactBtn {
        font-size: 0.86rem;
        font-weight: 600;
        min-height: 40px;
        padding: 0.45rem 0.95rem;
    }

    #contactInputMethods {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #contactInputMethods .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        font-size: 0.82rem;
        font-weight: 600;
        padding: 0.45rem 0.6rem;
        white-space: nowrap;
    }

    #contactInputMethods .btn i {
        font-size: 0.9rem;
    }

    #contactInputMethods .btn:nth-child(5) {
        grid-column: 1 / -1;
    }

    #contactModal .btn.btn-sm {
        min-height: 38px;
        font-size: 0.82rem;
        padding: 0.4rem 0.75rem;
    }

    #contactModal .modal-footer {
        gap: 8px;
    }

    #contactModal .modal-footer .btn {
        flex: 1 1 0;
        min-height: 42px;
        font-weight: 600;
    }

    .shop-area .btn.btn-sm,
    .shop-detail-area .btn.btn-sm,
    .family-area .btn.btn-sm,
    .family-detail-area .btn.btn-sm,
    .trips-area .btn.btn-sm,
    .trip-detail-area .btn.btn-sm,
    .forms-area .btn.btn-sm,
    .form-detail-area .btn.btn-sm {
        min-height: 36px;
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
}

/* ===== RECEIPTS / EXPENSE REPORTS ===== */
.receipts-area, .receipt-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.receipts-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    gap: 8px;
}
.receipts-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #064e3b;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.receipts-section-title .rct-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
    flex-shrink: 0;
}
/* Report cards */
.receipt-report-card {
    background: white;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 1.5px solid #f0fdf4;
}
.receipt-report-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.1);
}
.receipt-report-card .rrc-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
}
.receipt-report-card .rrc-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
}
.receipt-report-card .rrc-meta {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.receipt-report-card .rrc-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}
.receipt-report-card .rrc-stat i {
    color: #059669;
    font-size: 0.8rem;
}
/* Status badges */
.rct-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.rct-badge-draft { background: #f1f5f9; color: #64748b; }
.rct-badge-submitted { background: #dbeafe; color: #2563eb; }
.rct-badge-approved { background: #dcfce7; color: #16a34a; }
.rct-badge-rejected { background: #fef2f2; color: #dc2626; }
/* Receipt summary bar */
.receipt-summary-bar {
    background: white;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 12px;
}
.receipt-summary-bar .rsb-total {
    font-size: 1.3rem;
    font-weight: 800;
    color: #059669;
}
.receipt-summary-bar .rsb-count {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}
.receipt-category-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.receipt-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: #f0fdf4;
    color: #064e3b;
}
/* Receipt table */
.receipt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.receipt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.78rem;
}
.receipt-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 10px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.receipt-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
}
.receipt-table tr:hover td {
    background: #f0fdf4;
}
.receipt-table .rct-img-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #e2e8f0;
}
.receipt-table .rct-actions {
    display: flex;
    gap: 4px;
}
.receipt-table .rct-actions .btn {
    padding: 2px 6px;
    font-size: 0.72rem;
}

/* Receipt mobile cards */
.receipt-mobile-list {
    display: none;
}
.receipt-mobile-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.receipt-mobile-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.receipt-mobile-main {
    flex: 1;
    min-width: 0;
}
.receipt-mobile-supplier {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.25;
    word-break: break-word;
}
.receipt-mobile-meta {
    font-size: 0.72rem;
    color: #6b7280;
    line-height: 1.2;
    margin-top: 2px;
}
.receipt-mobile-total {
    font-size: 0.86rem;
    font-weight: 800;
    color: #059669;
    white-space: nowrap;
}
.rct-img-thumb-mobile {
    width: 44px;
    height: 44px;
}
.receipt-mobile-bottom {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.receipt-mobile-tax {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}
.receipt-mobile-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}
.receipt-mobile-actions .btn {
    flex: 1;
    font-size: 0.72rem;
    padding: 0.28rem 0.45rem;
    border-radius: 10px;
}

@media (max-width: 767.98px) {
    .receipt-mobile-list {
        display: block;
    }
    .receipt-table-desktop {
        display: none;
    }
}

@media (min-width: 768px) {
    .receipt-mobile-list {
        display: none;
    }
    .receipt-table-desktop {
        display: block;
    }
}

/* Empty state */
.receipts-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}
.receipts-empty i {
    font-size: 2.5rem;
    margin-bottom: 8px;
    display: block;
    opacity: 0.5;
}

/* ===== BUDGET ===== */

/* ── Prevent any horizontal overflow in budget ── */
.budget-area *, .budget-detail-area * { box-sizing: border-box; }
#budgetDashboardContent { overflow-x: hidden; max-width: 100%; }

/* ── Budget Landing Page ── */
.budget-landing { max-width: 480px; margin: 0 auto; }

.budget-hero {
    text-align: center;
    padding: 28px 8px 18px;
}
.budget-hero-icon {
    width: 64px; height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 14px;
}
[data-bs-theme="dark"] .budget-hero-icon {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    color: #6ee7b7;
}

.budget-preview-card {
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.budget-preview-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.budget-preview-metrics {
    display: flex; justify-content: space-between; gap: 8px;
    margin-bottom: 10px;
}
.budget-preview-metric { text-align: center; flex: 1; }
.budget-preview-value { font-size: 1.05rem; font-weight: 700; }
.budget-preview-label { font-size: 0.72rem; color: var(--ako-text-secondary); }
.budget-preview-bar {
    height: 6px; border-radius: 3px;
    background: var(--ako-border);
    margin-bottom: 6px;
    overflow: hidden;
}
.budget-preview-bar-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #059669, #10b981);
}

.budget-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
.budget-feature-tile {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 14px;
    padding: 12px;
}
.budget-feature-tile-icon {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.budget-feature-tile-text { min-width: 0; }

.budget-start-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 14px;
    padding: 14px;
}
.budget-start-card-icon {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.budget-start-primary .budget-start-card-icon {
    background: #d1fae5; color: #059669;
}
.budget-start-secondary .budget-start-card-icon {
    background: #fef3c7; color: #d97706;
}
[data-bs-theme="dark"] .budget-start-primary .budget-start-card-icon {
    background: #064e3b; color: #6ee7b7;
}
[data-bs-theme="dark"] .budget-start-secondary .budget-start-card-icon {
    background: #451a03; color: #fbbf24;
}
.budget-start-card-body { flex: 1; min-width: 0; }
.budget-start-btn { white-space: nowrap; }

.budget-start-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 12px 0;
    color: var(--ako-text-secondary);
    font-size: 0.8rem;
}
.budget-start-divider::before,
.budget-start-divider::after {
    content: ''; flex: 1; height: 1px;
    background: var(--ako-border);
}

/* ── Overview card (green gradient, 3 key metrics) ── */
.bdash-overview-card {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    margin-bottom: 12px;
}
.bdash-overview-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 14px;
    opacity: 0.92;
}
.bdash-period-badge {
    font-size: 0.68rem;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}
.bdash-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}
.bdash-overview-item { text-align: center; }
.bdash-overview-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.82;
    margin-bottom: 3px;
    line-height: 1.2;
}
.bdash-overview-value {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}
.bdash-overview-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    opacity: 0.9;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

/* ── Financial Health bar ── */
.bdash-health-card {
    background: var(--ako-card-bg);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--ako-divider);
}
.bdash-health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.bdash-health-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ako-text);
}
.bdash-health-score {
    font-size: 0.95rem;
    font-weight: 700;
}
.bdash-health-score small { font-size: 0.7rem; font-weight: 400; opacity: 0.6; }
.bdash-health-score.excellent { color: #059669; }
.bdash-health-score.good { color: #2563eb; }
.bdash-health-score.fair { color: #d97706; }
.bdash-health-score.poor { color: #dc2626; }
.bdash-health-track {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.bdash-health-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.bdash-health-meta {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 6px;
}

/* ── Alerts ── */
.bdash-alerts { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.bdash-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.35;
}
.bdash-alert.danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.bdash-alert.warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.bdash-alert.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.bdash-alert-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.35; }

/* ── Change badges ── */
.bdash-change {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    margin-top: 2px;
}
.bdash-change.positive { color: #fff; background: rgba(255,255,255,0.25); }
.bdash-change.negative { color: #fecaca; background: rgba(255,100,100,0.2); }
/* Change badges outside the overview card (in section cards) */
.bdash-section-card .bdash-change.positive { color: #059669; background: #ecfdf5; }
.bdash-section-card .bdash-change.negative { color: #dc2626; background: #fef2f2; }

/* ── Chart wrapper ── */
.bdash-chart-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* ── Spending breakdown stacked bar ── */
.bdash-stacked-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 12px;
    gap: 2px;
}
.bdash-bar-seg {
    height: 100%;
    border-radius: 3px;
    width: 0;
    animation: bdashBarGrow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.bdash-bar-seg:first-child { border-radius: 7px 3px 3px 7px; }
.bdash-bar-seg:last-child { border-radius: 3px 7px 7px 3px; }
.bdash-bar-seg:only-child { border-radius: 7px; }
@keyframes bdashBarGrow {
    from { width: 0; }
    to { width: var(--bar-pct); }
}

.bdash-cat-list { display: flex; flex-direction: column; gap: 6px; }
.bdash-cat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    opacity: 0;
    animation: bdashCatFadeIn 0.4s ease forwards;
}
.bdash-cat-row:nth-child(1) { animation-delay: 0.15s; }
.bdash-cat-row:nth-child(2) { animation-delay: 0.25s; }
.bdash-cat-row:nth-child(3) { animation-delay: 0.35s; }
.bdash-cat-row:nth-child(4) { animation-delay: 0.45s; }
.bdash-cat-row:nth-child(5) { animation-delay: 0.55s; }
.bdash-cat-row:nth-child(6) { animation-delay: 0.65s; }
@keyframes bdashCatFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}
.bdash-cat-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.bdash-cat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bdash-cat-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ako-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bdash-cat-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.bdash-cat-amount {
    font-size: 0.82rem;
    font-weight: 600;
    color: #dc2626;
}
.bdash-cat-pct {
    font-size: 0.72rem;
    color: #9ca3af;
    min-width: 36px;
    text-align: right;
}

/* ── Section cards ── */
.bdash-section-card {
    background: var(--ako-card-bg);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--ako-divider);
    overflow: hidden;
}
.bdash-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ako-text);
    margin-bottom: 10px;
}

/* ── Red-flag spending section ── */
.bdash-redflag-section {
    border: 1px solid #fca5a5;
    background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
}
[data-bs-theme="dark"] .bdash-redflag-section {
    background: linear-gradient(135deg, #1a0a0a 0%, #1c1212 100%);
    border-color: #7f1d1d;
}
.bdash-redflag-list { display: flex; flex-direction: column; gap: 10px; }
.bdash-redflag-item {
    background: rgba(255,255,255,0.7);
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 12px;
    animation: bdashFlagSlideIn 0.5s ease forwards;
    opacity: 0;
}
[data-bs-theme="dark"] .bdash-redflag-item {
    background: rgba(127,29,29,0.15);
    border-color: #991b1b;
}
.bdash-redflag-item:nth-child(1) { animation-delay: 0.1s; }
.bdash-redflag-item:nth-child(2) { animation-delay: 0.2s; }
.bdash-redflag-item:nth-child(3) { animation-delay: 0.3s; }
.bdash-redflag-item:nth-child(4) { animation-delay: 0.4s; }
@keyframes bdashFlagSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.bdash-redflag-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.bdash-redflag-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bdash-redflag-icon { font-size: 1.4rem; }
.bdash-redflag-label { font-size: 0.85rem; font-weight: 600; color: #b91c1c; }
[data-bs-theme="dark"] .bdash-redflag-label { color: #fca5a5; }
.bdash-redflag-count { font-size: 0.72rem; color: #6b7280; }
.bdash-redflag-amounts { text-align: right; flex-shrink: 0; }
.bdash-redflag-total { font-size: 0.88rem; font-weight: 700; color: #dc2626; }
.bdash-redflag-annual { font-size: 0.68rem; color: #9ca3af; }
.bdash-redflag-tip {
    font-size: 0.75rem;
    color: #4b5563;
    background: rgba(16,185,129,0.08);
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.4;
}
[data-bs-theme="dark"] .bdash-redflag-tip { background: rgba(16,185,129,0.1); color: #9ca3af; }
.bdash-redflag-txns {
    margin-top: 6px;
    border-top: 1px dashed #e5e7eb;
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
[data-bs-theme="dark"] .bdash-redflag-txns { border-color: #374151; }
.bdash-redflag-txn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: #6b7280;
}
.bdash-redflag-txn-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.bdash-redflag-txn-amt { color: #dc2626; font-weight: 600; flex-shrink: 0; margin-left: 8px; }
.bdash-redflag-savings {
    margin-top: 10px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.78rem;
    color: #065f46;
    text-align: center;
}
[data-bs-theme="dark"] .bdash-redflag-savings {
    background: linear-gradient(135deg, #064e3b, #065f46);
    color: #a7f3d0;
}

/* ── Budget Chat CTA card ── */
.bdash-chat-cta {
    border: 1px solid #93c5fd;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
[data-bs-theme="dark"] .bdash-chat-cta {
    background: linear-gradient(135deg, #0c1a2e 0%, #0f1d32 100%);
    border-color: #1e3a5f;
}
.bdash-chat-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.15); }
.bdash-chat-cta-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Budget Chat Modal ── */
.budget-chat-modal-content { border-radius: 20px !important; }
.budget-chat-modal-content .modal-body { min-height: 0; }
.budget-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.budget-chat-chip {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #a7f3d0;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #065f46;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
[data-bs-theme="dark"] .budget-chat-chip {
    background: linear-gradient(135deg, #064e3b, #065f46);
    border-color: #047857;
    color: #a7f3d0;
}
.budget-chat-chip:hover { transform: scale(1.03); background: #d1fae5; }
.budget-chat-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}
.budget-chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    animation: bdashTypingDot 1.4s ease-in-out infinite;
}
.budget-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.budget-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bdashTypingDot {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.1); }
}

/* ── Recurring grid ── */
.bdash-recurring-grid { display: flex; flex-direction: column; gap: 6px; }
.bdash-recurring-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--ako-bg);
    border-radius: 8px;
    font-size: 0.82rem;
    gap: 8px;
}
.bdash-recurring-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.bdash-recurring-name {
    color: var(--ako-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bdash-recurring-freq {
    font-size: 0.65rem;
    color: #9ca3af;
    text-transform: capitalize;
}
.bdash-recurring-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    white-space: nowrap;
}
.bdash-recurring-unit {
    font-size: 0.68rem;
    color: #9ca3af;
}

/* ── Goals mini ── */
.bdash-goals-grid { display: flex; flex-direction: column; gap: 10px; }
.bdash-goal-mini {
    padding: 10px 12px;
    background: var(--ako-bg);
    border-radius: 10px;
}

/* ── Recent transactions ── */
.bdash-txns { display: flex; flex-direction: column; }
.bdash-txn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--ako-divider);
}
.bdash-txn-row:last-child { border-bottom: none; }
.bdash-txn-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.bdash-txn-icon.income { background: #ecfdf5; color: #059669; }
.bdash-txn-icon.expense { background: #fef2f2; color: #dc2626; }
.bdash-txn-body { flex-grow: 1; min-width: 0; }
.bdash-txn-desc { font-size: 0.82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ako-text); }
.bdash-txn-meta { font-size: 0.7rem; color: #9ca3af; }
.bdash-txn-amount { font-size: 0.85rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.bdash-txn-amount.income { color: #059669; }
.bdash-txn-amount.expense { color: #dc2626; }

/* ── Insights ── */
.bdash-insights { display: flex; flex-direction: column; gap: 8px; }
.bdash-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ako-bg);
    border-radius: 8px;
}

/* ── Period list at bottom ── */
.bdash-periods-list { display: flex; flex-direction: column; gap: 4px; }
.bdash-period-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.bdash-period-row:hover { background: var(--ako-bg); }
.bdash-period-row:active { background: rgba(5,150,105,0.08); }
.min-width-0 { min-width: 0; }

/* Budget area scroll container */
.budget-area, .budget-detail-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}

/* Agent area scroll container */
.agent-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}

.budget-period-card {
    background: var(--ako-card-bg);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.15s, box-shadow 0.15s;
}
.budget-period-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.budget-period-stats { font-size: 0.82rem; }
.budget-period-bar { height: 4px; background: #e5e7eb; border-radius: 4px; position: relative; overflow: hidden; }
.budget-bar-income { position: absolute; top: 0; left: 0; height: 100%; background: #059669; border-radius: 4px; }
.budget-bar-expense { position: absolute; top: 0; left: 0; height: 100%; background: #dc2626; border-radius: 4px; opacity: 0.7; }

.budget-health-mini {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
}
.budget-health-mini.excellent { background: #059669; }
.budget-health-mini.good { background: #2563eb; }
.budget-health-mini.fair { background: #d97706; }
.budget-health-mini.poor { background: #dc2626; }

.budget-health-badge {
    display: inline-flex; align-items: baseline; gap: 2px;
    padding: 6px 14px; border-radius: 20px; font-weight: 700; color: #fff;
}
.budget-health-badge .health-score { font-size: 1.4rem; }
.budget-health-badge .small { font-size: 0.75rem; opacity: 0.8; }
.budget-health-badge.excellent { background: #059669; }
.budget-health-badge.good { background: #2563eb; }
.budget-health-badge.fair { background: #d97706; }
.budget-health-badge.poor { background: #dc2626; }

.budget-detail-summary { display: flex; gap: 6px; flex-wrap: wrap; }

.budget-tabs {
    display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}
.budget-tab {
    padding: 6px 14px; border-radius: 20px; border: none;
    background: transparent; color: #6b7280; font-size: 0.82rem;
    font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: all 0.15s;
}
.budget-tab.active { background: #059669; color: #fff; }
.budget-tab:hover:not(.active) { background: rgba(5,150,105,0.1); }

.budget-stat-card {
    background: var(--ako-card-bg); border-radius: 10px;
    padding: 12px; text-align: center;
    border: 1px solid rgba(0,0,0,0.06);
}
.budget-stat-label { font-size: 0.72rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }
.budget-stat-value { font-size: 1.1rem; font-weight: 700; margin-top: 2px; }
.budget-stat-card.income { border-left: 3px solid #059669; }
.budget-stat-card.income .budget-stat-value { color: #059669; }
.budget-stat-card.expense { border-left: 3px solid #dc2626; }
.budget-stat-card.expense .budget-stat-value { color: #dc2626; }
.budget-stat-card.liability { border-left: 3px solid #d97706; }
.budget-stat-card.liability .budget-stat-value { color: #d97706; }
.budget-stat-card.positive { border-left: 3px solid #2563eb; }
.budget-stat-card.positive .budget-stat-value { color: #2563eb; }
.budget-stat-card.negative { border-left: 3px solid #dc2626; }
.budget-stat-card.negative .budget-stat-value { color: #dc2626; }

.budget-chart-container {
    background: var(--ako-card-bg); border-radius: 10px;
    padding: 14px; border: 1px solid rgba(0,0,0,0.06);
}

.budget-recurring-list {
    background: var(--ako-card-bg); border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06); overflow: hidden;
}
.budget-recurring-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 0.85rem;
}
.budget-recurring-item:last-child { border-bottom: none; }

.budget-txn-row {
    padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer; transition: background 0.12s;
}
.budget-txn-row:hover { background: rgba(5,150,105,0.04); }
.budget-txn-desc { font-size: 0.88rem; font-weight: 500; }
.budget-txn-meta { font-size: 0.72rem; color: #9ca3af; }
.budget-txn-amount { font-weight: 600; font-size: 0.88rem; white-space: nowrap; }

.budget-cat-dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; flex-shrink: 0;
}

.budget-cat-picker {
    display: flex; gap: 4px; flex-wrap: wrap; padding: 6px;
    background: #f9fafb; border-radius: 8px;
}
.budget-cat-pick-btn {
    padding: 3px 8px; border-radius: 12px; font-size: 0.72rem;
    border: 1px solid #d1d5db; background: #fff; cursor: pointer;
    transition: all 0.12s;
}
.budget-cat-pick-btn:hover { background: #f3f4f6; transform: scale(1.05); }

.budget-goal-card {
    background: var(--ako-card-bg); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid rgba(0,0,0,0.06);
}
.budget-goal-card.achieved { border-left: 3px solid #059669; }
.budget-goal-card.on-track { border-left: 3px solid #2563eb; }
.budget-goal-card.off-track { border-left: 3px solid #d97706; }

.budget-afford-card {
    background: var(--ako-card-bg); border-radius: 10px;
    padding: 14px; border: 1px solid rgba(0,0,0,0.06);
}
.budget-afford-result { font-size: 0.88rem; }
.budget-risk-badge {
    display: inline-block; padding: 4px 12px; border-radius: 12px;
    color: #fff; font-size: 0.72rem; font-weight: 700;
}

.budget-compare-table {
    background: var(--ako-card-bg); border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06); overflow: hidden;
}
.budget-compare-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr auto;
    gap: 8px; padding: 8px 14px; font-size: 0.82rem;
    border-bottom: 1px solid rgba(0,0,0,0.05); align-items: center;
}
.budget-compare-row:last-child { border-bottom: none; }
.budget-compare-row.header { font-weight: 600; background: #f9fafb; font-size: 0.75rem; text-transform: uppercase; color: #6b7280; }

.budget-insight-card {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--ako-card-bg); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid rgba(0,0,0,0.06);
}

.budget-suggested-goal {
    display: flex; align-items: center; gap: 10px;
    background: #f0fdf4; border-radius: 10px;
    padding: 10px 14px; margin-bottom: 6px;
    border: 1px solid rgba(5,150,105,0.15);
}

.budget-projection-card {
    display: flex; align-items: center;
    background: #eff6ff; border-radius: 10px;
    padding: 10px 14px; border: 1px solid rgba(37,99,235,0.15);
}

.budget-detail-header {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: var(--ako-card-bg);
}

.upload-progress-card {
    background: #f0fdf4; border-radius: 10px;
    padding: 10px 14px; border: 1px solid rgba(5,150,105,0.15);
}

.budget-cat-row {
    padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.budget-cat-row:last-child { border-bottom: none; }

/* ── AI Adviser section ── */
.bdash-ai-section {
    border: 1px solid rgba(5,150,105,0.2);
    background: linear-gradient(135deg, rgba(5,150,105,0.03), rgba(37,99,235,0.03));
}
.bdash-advice-section { }
.bdash-advice-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: #f0fdf4;
    border-radius: 8px;
    margin-bottom: 6px;
    border-left: 3px solid #059669;
}
.bdash-projection {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
    background: #eff6ff;
    border-radius: 8px;
    border-left: 3px solid #2563eb;
}
.bdash-suggested-goal {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ako-bg);
    border-radius: 8px;
    margin-bottom: 6px;
}

/* ===== TASK FILE ATTACHMENTS ===== */
.task-files-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.task-file-tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f5f9;
    cursor: pointer;
    transition: transform 0.15s;
}

.task-file-tile:hover {
    transform: scale(1.03);
}

.task-file-tile img,
.task-file-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.task-file-tile .file-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.5rem;
}

.task-file-tile .file-icon-placeholder span {
    font-size: 0.55rem;
    margin-top: 4px;
    text-align: center;
    word-break: break-all;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-file-tile .file-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239,68,68,0.85);
    color: #fff;
    border: none;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    cursor: pointer;
}

.task-file-tile:hover .file-delete-btn {
    opacity: 1;
}

/* Mobile always show delete btn */
@media (max-width: 576px) {
    .task-file-tile .file-delete-btn { opacity: 0.8; }
}

/* Preview thumbnails for new files (add modal) */
.task-files-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.task-file-preview-item {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
}

.task-file-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.task-file-preview-item .preview-ext {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
}

.task-file-preview-item .preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(239,68,68,0.85);
    color: #fff;
    border: none;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Attachment count badge on task row */
.task-attachment-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    color: #94a3b8;
    margin-left: 4px;
}


/* ===================================================
   DAILY DASHBOARD
   =================================================== */

.dashboard-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}
.dashboard-area::-webkit-scrollbar { width: 4px; }
.dashboard-area::-webkit-scrollbar-track { background: transparent; }
.dashboard-area::-webkit-scrollbar-thumb { background: var(--ako-border); border-radius: 4px; }

.dashboard-feed {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 80px;
}

/* ---------- Greeting ---------- */
.dash-greeting {
    text-align: center;
    padding: 24px 16px 12px;
}
.dash-greeting-emoji {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.dash-greeting h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.3px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dash-greeting .dash-date {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* ---------- TTS Daily Briefing Button ---------- */
.dash-tts-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 22px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
    position: relative;
    overflow: hidden;
}
.dash-tts-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.dash-tts-btn:hover::before { opacity: 1; }
.dash-tts-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(79, 70, 229, 0.4);
}
.dash-tts-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
.dash-tts-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s;
}
.dash-tts-btn:hover i { transform: scale(1.1); }

/* Loading state */
.dash-tts-btn.loading {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    pointer-events: none;
    opacity: 0.9;
}
.dash-tts-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dashTtsSpin 0.8s linear infinite;
}
@keyframes dashTtsSpin {
    to { transform: rotate(360deg); }
}

/* Playing state */
.dash-tts-btn.playing {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
    animation: dashTtsPulse 2s ease-in-out infinite;
}
.dash-tts-btn.playing:hover {
    box-shadow: 0 6px 22px rgba(220, 38, 38, 0.4);
}
@keyframes dashTtsPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3); }
    50% { box-shadow: 0 4px 22px rgba(220, 38, 38, 0.5); }
}

/* Equalizer bars */
.dash-tts-eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    margin-right: 2px;
}
.dash-tts-eq-bar {
    width: 3px;
    background: #fff;
    border-radius: 2px;
    animation: dashTtsEq 0.6s ease-in-out infinite alternate;
}
.dash-tts-eq-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.dash-tts-eq-bar:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.dash-tts-eq-bar:nth-child(3) { height: 8px; animation-delay: 0.3s; }
.dash-tts-eq-bar:nth-child(4) { height: 14px; animation-delay: 0.45s; }
@keyframes dashTtsEq {
    0% { height: 4px; }
    100% { height: 16px; }
}

/* ---------- Card base ---------- */
.dash-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}
.dash-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.dash-card:hover::before {
    opacity: 1;
}
.dash-card:active {
    transform: scale(0.985);
}
.dash-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 0.82rem;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dash-card-header i {
    font-size: 1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}
.dash-card-header .dash-card-action {
    margin-left: auto;
    font-size: 0.72rem;
    color: #6366f1;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 10px;
    border-radius: 8px;
    background: #eef2ff;
    transition: all 0.2s;
}
.dash-card-header .dash-card-action:hover {
    background: #e0e7ff;
    text-decoration: none;
}

/* ---------- Weather ---------- */
.dash-weather {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #f8fafc 100%);
    border: 1px solid rgba(56,189,248,0.15);
}
.dash-weather::before { background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
.dash-weather .dash-card-header i {
    background: rgba(56,189,248,0.15);
    color: #0284c7;
}
.dash-weather-main {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.dash-weather-emoji {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));
}
.dash-weather-temp {
    font-size: 2.4rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -1px;
}
.dash-weather-temp small {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    display: block;
    margin-top: 4px;
    letter-spacing: 0;
}
.dash-weather-desc {
    font-size: 0.82rem;
    color: #475569;
    font-weight: 500;
}
.dash-weather-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.dash-weather-details span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.dash-forecast {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dash-forecast::-webkit-scrollbar { display: none; }
.dash-forecast-day {
    text-align: center;
    min-width: 72px;
    padding: 8px 6px;
    background: rgba(255,255,255,0.7);
    border-radius: 12px;
    font-size: 0.72rem;
    color: #334155;
    border: 1px solid rgba(0,0,0,0.04);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.dash-forecast-day .fc-emoji {
    font-size: 1.3rem;
    display: block;
    margin: 3px 0;
}
.dash-forecast-day .fc-temps {
    font-weight: 700;
    font-size: 0.74rem;
}

/* ---------- Pacific Weather Carousel ---------- */
.dash-pacific-weather::before { background: linear-gradient(90deg, #0ea5e9, #06b6d4); }
.dash-pacific-weather .dash-card-header i {
    background: rgba(14,165,233,0.12);
    color: #0284c7;
}
.dash-pacific-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px;
}
.dash-pacific-scroll::-webkit-scrollbar { display: none; }
.dash-pacific-card {
    min-width: 130px;
    max-width: 140px;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: rgba(255,255,255,0.75);
    border-radius: 14px;
    padding: 12px 10px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: transform 0.15s, box-shadow 0.15s;
}
.dash-pacific-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.dash-pacific-city {
    font-size: 0.74rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-pacific-time {
    font-size: 0.65rem;
    color: #6366f1;
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}
.dash-pacific-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}
.dash-pacific-emoji {
    font-size: 1.6rem;
    line-height: 1;
}
.dash-pacific-temp {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}
.dash-pacific-desc {
    font-size: 0.68rem;
    color: #475569;
    font-weight: 500;
    margin-bottom: 6px;
}
.dash-pacific-details {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 500;
}
.dash-pacific-hilo {
    font-size: 0.68rem;
    color: #334155;
    font-weight: 700;
    margin-top: 4px;
}

/* ---------- Tasks ---------- */
.dash-tasks::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.dash-tasks .dash-card-header i {
    background: rgba(99,102,241,0.12);
    color: #6366f1;
}
.dash-task-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.dash-task-stat {
    flex: 1;
    text-align: center;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 14px;
    padding: 12px 6px;
    border: 1px solid rgba(0,0,0,0.03);
}
.dash-task-stat .stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.5px;
}
.dash-task-stat .stat-label {
    font-size: 0.62rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 4px;
}
.dash-task-stat.overdue .stat-num {
    color: #ef4444;
}
.dash-task-stat.overdue {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: rgba(239,68,68,0.1);
}
.dash-task-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}
.dash-task-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.dash-priority-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dash-priority-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.8rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}
.dash-priority-item:last-child {
    border-bottom: none;
}
.dash-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}
.dash-priority-time {
    margin-left: auto;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}

/* ---------- News ---------- */
.dash-news::before { background: linear-gradient(90deg, #f59e0b, #f97316); }
.dash-news .dash-card-header i {
    background: rgba(245,158,11,0.12);
    color: #d97706;
}
.dash-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dash-news-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.dash-news-item:last-child {
    border-bottom: none;
}
.dash-news-item a {
    font-size: 0.82rem;
    color: #1e293b;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.4;
    display: block;
    transition: color 0.15s;
}
.dash-news-item a:hover {
    color: #6366f1;
}
.dash-news-source {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 3px;
    font-weight: 500;
}
.dash-news-hidden {
    display: none;
}
.dash-news-expanded .dash-news-hidden {
    display: list-item;
}
.dash-news-toggle {
    display: block;
    width: 100%;
    padding: 8px 0;
    background: none;
    border: none;
    color: #6366f1;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: color 0.15s;
}
.dash-news-toggle:hover {
    color: #4f46e5;
}

/* ---------- Activity ---------- */
.dash-activity::before { background: linear-gradient(90deg, #10b981, #059669); }
.dash-activity .dash-card-header i {
    background: rgba(16,185,129,0.12);
    color: #059669;
}
.dash-activity-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dash-activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    font-size: 0.8rem;
    color: #334155;
    font-weight: 500;
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.dash-activity-link {
    cursor: pointer;
}
.dash-activity-link:hover {
    transform: translateX(4px);
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    box-shadow: 0 2px 8px rgba(99,102,241,0.12);
}
.dash-activity-link:active {
    transform: translateX(2px) scale(0.98);
}
.dash-activity-row i {
    color: #6366f1;
    font-size: 0.95rem;
    width: 22px;
    text-align: center;
}
.dash-activity-arrow {
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.7rem;
    transition: transform 0.15s, color 0.15s;
}
.dash-activity-link:hover .dash-activity-arrow {
    color: #6366f1;
    transform: translateX(2px);
}
.dash-activity-count {
    font-weight: 700;
    color: #4f46e5;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    min-width: 28px;
    text-align: center;
}

/* ---------- Budget ---------- */
.dash-budget::before { background: linear-gradient(90deg, #8b5cf6, #a855f7); }
.dash-budget .dash-card-header i {
    background: rgba(139,92,246,0.12);
    color: #7c3aed;
}
.dash-budget-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid #f8fafc;
}
.dash-budget-row:last-child {
    border-bottom: none;
}
.dash-budget-label {
    color: #64748b;
    font-weight: 500;
}
.dash-budget-value {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.85rem;
}
.dash-health-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.72rem;
}
.dash-health-good { background: #dcfce7; color: #16a34a; }
.dash-health-ok { background: #fef9c3; color: #ca8a04; }
.dash-health-bad { background: #fee2e2; color: #dc2626; }

/* ---------- Holidays ---------- */
.dash-holidays::before { background: linear-gradient(90deg, #ec4899, #f43f5e); }
.dash-holidays .dash-card-header i {
    background: rgba(236,72,153,0.12);
    color: #db2777;
}
.dash-holiday-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid #f1f5f9;
}
.dash-holiday-item:last-child {
    border-bottom: none;
}
.dash-holiday-name {
    color: #1e293b;
    font-weight: 600;
}
.dash-holiday-date {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
    text-align: right;
}

/* ---------- Dashboard: Upcoming Events ---------- */
.dash-events::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.dash-events .dash-card-header i { background: rgba(99,102,241,0.12); color: #6366f1; }
.dash-event-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s;
}
.dash-event-item:last-child { border-bottom: none; }
.dash-event-item:hover { background: #f8fafc; border-radius: 8px; padding-left: 6px; }
.dash-event-title { font-size: 0.87rem; font-weight: 600; color: #1e293b; }
.dash-event-meta { font-size: 0.71rem; color: #94a3b8; margin-top: 3px; }
.dash-event-group { font-weight: 700; color: #6366f1; }
.dash-event-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.dash-event-countdown { font-size: 0.72rem; font-weight: 700; color: #6b7280; }
.dash-event-countdown.dash-event-soon { color: #ef4444; }
.dash-event-countdown.dash-event-near { color: #f59e0b; }
.dash-rsvp-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}
.dash-rsvp-badge.rsvp-going { background: #dcfce7; color: #16a34a; }
.dash-rsvp-badge.rsvp-maybe { background: #fef9c3; color: #a16207; }
.dash-rsvp-badge.rsvp-no { background: #fee2e2; color: #dc2626; }
.dash-rsvp-badge.rsvp-none { background: #f3f4f6; color: #9ca3af; }
.dash-event-attendees { font-size: 0.7rem; color: #94a3b8; margin-left: auto; }

/* ---------- Dashboard: Family Savings Goals ---------- */
.dash-savings::before { background: linear-gradient(90deg, #10b981, #059669); }
.dash-savings .dash-card-header i { background: rgba(16,185,129,0.12); color: #10b981; }
.dash-savings-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}
.dash-savings-item:last-child { border-bottom: none; }
.dash-savings-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
    gap: 8px;
}
.dash-savings-title { font-size: 0.85rem; font-weight: 600; color: #1e293b; }
.dash-savings-group { font-size: 0.68rem; color: #6366f1; font-weight: 700; white-space: nowrap; }
.dash-savings-bar-wrap {
    height: 7px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}
.dash-savings-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
    min-width: 3px;
}
.dash-savings-bar.bar-low { background: #ef4444; }
.dash-savings-bar.bar-mid { background: #f59e0b; }
.dash-savings-bar.bar-good { background: #10b981; }
.dash-savings-bar.bar-complete { background: linear-gradient(90deg, #10b981, #059669); }
.dash-savings-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 4px;
}

/* ---------- Quote ---------- */
.dash-quote {
    text-align: center;
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 50%, #faf5ff 100%);
    border: 1px solid rgba(167,139,250,0.15);
}
.dash-quote::before { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.dash-quote .dash-card-header i {
    background: rgba(167,139,250,0.15);
    color: #7c3aed;
}
.dash-quote blockquote {
    font-size: 0.95rem;
    font-style: italic;
    color: #475569;
    margin: 0 0 10px;
    line-height: 1.65;
    padding: 0 8px;
    font-weight: 500;
}
.dash-quote cite {
    font-size: 0.75rem;
    color: #7c3aed;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ---------- Email To Tasks ---------- */
.dash-email-forwarding {
    background: linear-gradient(145deg, #f7fafc 0%, #eef6ff 55%, #f5f3ff 100%);
    border: 1px solid rgba(59, 130, 246, 0.14);
}
.dash-email-forwarding::before {
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
}
.dash-email-forwarding .dash-card-header i {
    background: rgba(14, 165, 233, 0.14);
    color: #0284c7;
}
.dash-forwarding-subtitle {
    margin: -4px 0 12px;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}
.dash-forwarding-address-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}
.dash-forwarding-address {
    border-radius: 10px;
    border-color: rgba(59, 130, 246, 0.22);
    font-size: 0.8rem;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.9);
}
.dash-forwarding-note {
    margin-top: 8px;
    font-size: 0.7rem;
    color: #64748b;
}
.dash-forwarding-switches {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(59, 130, 246, 0.14);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.dash-forwarding-switches .form-check-label {
    font-size: 0.76rem;
    color: #1e293b;
    font-weight: 500;
}
.dash-forwarding-senders {
    margin-top: 12px;
}
.dash-forwarding-label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: #475569;
    font-weight: 700;
}
.dash-forwarding-input {
    border-radius: 10px 0 0 10px;
    border-color: rgba(59, 130, 246, 0.2);
}
.dash-forwarding-allowed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

[data-bs-theme="dark"] .dash-email-forwarding {
    background: linear-gradient(145deg, #1e293b 0%, #172554 55%, #312e81 100%);
    border-color: rgba(99, 102, 241, 0.32);
}
[data-bs-theme="dark"] .dash-forwarding-subtitle,
[data-bs-theme="dark"] .dash-forwarding-note {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .dash-forwarding-address {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(99, 102, 241, 0.35);
    color: #f8fafc;
}
[data-bs-theme="dark"] .dash-forwarding-label {
    color: #dbeafe;
}
[data-bs-theme="dark"] .dash-forwarding-switches {
    border-top-color: rgba(99, 102, 241, 0.3);
}
[data-bs-theme="dark"] .dash-forwarding-switches .form-check-label {
    color: #f1f5f9;
}

@media (max-width: 576px) {
    .dash-forwarding-address-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .dash-forwarding-address-row .btn {
        width: 100%;
    }
    .dash-forwarding-switches {
        grid-template-columns: 1fr;
    }
}

/* ---------- Skeleton ---------- */
.dash-card.skeleton-card {
    min-height: 90px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

/* ---------- Refresh ---------- */
.dash-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px auto 24px;
    padding: 10px 24px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dash-refresh-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.dash-refresh-btn.spinning i {
    animation: spin-refresh 0.8s linear infinite;
}
@keyframes spin-refresh {
    to { transform: rotate(360deg); }
}

/* ---------- Empty ---------- */
.dash-empty {
    text-align: center;
    padding: 16px;
    color: #94a3b8;
    font-size: 0.8rem;
}

/* ---------- Dark mode ---------- */
[data-bs-theme="dark"] .dash-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
}
[data-bs-theme="dark"] .dash-card-header { color: #f1f5f9; }
[data-bs-theme="dark"] .dash-card-header .dash-card-action {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
}
[data-bs-theme="dark"] .dash-card-header .dash-card-action:hover {
    background: rgba(99,102,241,0.25);
}
[data-bs-theme="dark"] .dash-greeting h2 {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
}
[data-bs-theme="dark"] .dash-greeting .dash-date { color: #94a3b8; }
[data-bs-theme="dark"] .dash-tts-btn {
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.25);
}
[data-bs-theme="dark"] .dash-tts-btn:hover {
    box-shadow: 0 6px 22px rgba(79, 70, 229, 0.35);
}
[data-bs-theme="dark"] .dash-tts-btn.playing {
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.25);
}
[data-bs-theme="dark"] .dash-weather {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}
[data-bs-theme="dark"] .dash-weather-temp { color: #f1f5f9; }
[data-bs-theme="dark"] .dash-weather-temp small,
[data-bs-theme="dark"] .dash-weather-details,
[data-bs-theme="dark"] .dash-weather-desc { color: #94a3b8; }
[data-bs-theme="dark"] .dash-weather-details { border-color: #334155; }
[data-bs-theme="dark"] .dash-forecast-day {
    background: #334155;
    color: #e2e8f0;
    border-color: #475569;
}
[data-bs-theme="dark"] .dash-pacific-card {
    background: rgba(51,65,85,0.7);
    border-color: #475569;
}
[data-bs-theme="dark"] .dash-pacific-city { color: #f1f5f9; }
[data-bs-theme="dark"] .dash-pacific-time { color: #a5b4fc; }
[data-bs-theme="dark"] .dash-pacific-temp { color: #f1f5f9; }
[data-bs-theme="dark"] .dash-pacific-desc { color: #94a3b8; }
[data-bs-theme="dark"] .dash-pacific-details { color: #64748b; }
[data-bs-theme="dark"] .dash-pacific-hilo { color: #cbd5e1; }
[data-bs-theme="dark"] .dash-task-stat {
    background: linear-gradient(135deg, #334155, #1e293b);
    border-color: #475569;
}
[data-bs-theme="dark"] .dash-task-stat .stat-num { color: #f1f5f9; }
[data-bs-theme="dark"] .dash-task-stat.overdue {
    background: linear-gradient(135deg, #3b1a1a, #2d1515);
    border-color: rgba(239,68,68,0.2);
}
[data-bs-theme="dark"] .dash-task-progress { background: #334155; }
[data-bs-theme="dark"] .dash-priority-item { color: #e2e8f0; border-color: #334155; }
[data-bs-theme="dark"] .dash-priority-dot { box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
[data-bs-theme="dark"] .dash-news-item a { color: #e2e8f0; }
[data-bs-theme="dark"] .dash-news-item a:hover { color: #818cf8; }
[data-bs-theme="dark"] .dash-news-source { color: #64748b; }
[data-bs-theme="dark"] .dash-news-item { border-color: #334155; }
[data-bs-theme="dark"] .dash-news-toggle { color: #818cf8; }
[data-bs-theme="dark"] .dash-news-toggle:hover { color: #a5b4fc; }
[data-bs-theme="dark"] .dash-activity-row {
    background: linear-gradient(135deg, #334155, #1e293b);
    color: #e2e8f0;
    border-color: #475569;
}
[data-bs-theme="dark"] .dash-activity-link:hover {
    background: linear-gradient(135deg, #3b3f6b, #312e81);
    box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}
[data-bs-theme="dark"] .dash-activity-arrow { color: #64748b; }
[data-bs-theme="dark"] .dash-activity-link:hover .dash-activity-arrow { color: #a5b4fc; }
[data-bs-theme="dark"] .dash-activity-count { background: #312e81; color: #a5b4fc; }
[data-bs-theme="dark"] .dash-budget-label { color: #94a3b8; }
[data-bs-theme="dark"] .dash-budget-value { color: #f1f5f9; }
[data-bs-theme="dark"] .dash-budget-row { border-color: #334155; }
[data-bs-theme="dark"] .dash-holiday-item { border-color: #334155; }
[data-bs-theme="dark"] .dash-holiday-name { color: #e2e8f0; }
[data-bs-theme="dark"] .dash-holiday-date { color: #64748b; }
[data-bs-theme="dark"] .dash-event-item { border-color: #334155; }
[data-bs-theme="dark"] .dash-event-item:hover { background: #1e293b; }
[data-bs-theme="dark"] .dash-event-title { color: #e2e8f0; }
[data-bs-theme="dark"] .dash-event-meta { color: #64748b; }
[data-bs-theme="dark"] .dash-rsvp-badge.rsvp-none { background: #334155; color: #94a3b8; }
[data-bs-theme="dark"] .dash-savings-item { border-color: #334155; }
[data-bs-theme="dark"] .dash-savings-title { color: #e2e8f0; }
[data-bs-theme="dark"] .dash-savings-bar-wrap { background: #334155; }
[data-bs-theme="dark"] .dash-savings-meta { color: #64748b; }
[data-bs-theme="dark"] .dash-quote {
    background: linear-gradient(135deg, #1e1b2e 0%, #1e293b 100%);
    border-color: #334155;
}
[data-bs-theme="dark"] .dash-quote blockquote { color: #cbd5e1; }
[data-bs-theme="dark"] .dash-quote cite { color: #a78bfa; }
[data-bs-theme="dark"] .dash-refresh-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
[data-bs-theme="dark"] .dash-refresh-btn:hover {
    background: #334155;
    color: #e2e8f0;
    border-color: #475569;
}
[data-bs-theme="dark"] .dash-card.skeleton-card {
    background: linear-gradient(135deg, #1e293b, #334155);
}

/* ===================================================
   AUDIO & VIDEO CALLING
   =================================================== */

/* Incoming call modal — avatar ring animation */
.incoming-call-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    position: relative;
    animation: callPulseRing 1.5s ease-out infinite;
}
@keyframes callPulseRing {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
    70% { box-shadow: 0 0 0 20px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.incoming-call-type {
    font-size: 0.82rem;
    color: #64748b;
}

/* Answer / Decline buttons */
.call-answer-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}
.call-answer-btn:hover { transform: scale(1.1); }
.call-answer-btn.answer {
    background: linear-gradient(135deg, #059669, #10b981);
}
.call-answer-btn.decline {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

/* Active call modal */
.active-call-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.active-call-timer {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: #0f172a;
}

/* Video container */
.call-video-container {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    max-height: 300px;
    margin-bottom: 12px;
}
.call-video-container video.remote-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.call-video-container video.local-video {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 100px;
    height: 75px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #fff;
    z-index: 2;
}

/* Call controls */
.call-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.call-control-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    cursor: pointer;
}
.call-control-btn:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}
.call-control-btn.call-control-active {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
.call-control-btn.call-control-recording {
    background: #fef2f2;
    border-color: #dc2626;
    color: #dc2626;
    animation: recordPulse 1.5s ease-in-out infinite;
}
.call-control-btn.call-end {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border-color: transparent;
    color: #fff;
    width: 56px;
    height: 56px;
}
.call-control-btn.call-end:hover {
    transform: scale(1.1);
}
@keyframes recordPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

/* Recording indicator */
.call-recording-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 600;
}
.call-rec-dot {
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    animation: recBlink 1s steps(2) infinite;
}
@keyframes recBlink {
    0% { opacity: 1; }
    50% { opacity: 0; }
}

/* Floating call bar */
.call-floating-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.call-floating-bar .call-bar-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.call-floating-bar .call-bar-timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
}
.call-floating-bar .call-bar-rec-dot {
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    animation: recBlink 1s steps(2) infinite;
}
.call-floating-bar button {
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.call-floating-bar button:hover {
    background: rgba(255,255,255,0.3);
}
.call-floating-bar button.call-bar-end {
    background: rgba(220,38,38,0.8);
}

/* Online status dot (family members) */
.call-online-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    bottom: 0;
    right: 0;
}
.call-online-dot.online {
    background: #10b981;
}
.call-online-dot.offline {
    background: #94a3b8;
}
.family-member-avatar {
    position: relative;
}

/* Presence badge on member cards */
.family-member-presence {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
}
.family-member-presence.is-online { background: #dcfce7; color: #059669; }
.family-member-presence.is-offline { background: #f3f4f6; color: #9ca3af; }

/* Call buttons on member cards */
.family-member-call-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}
.family-call-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    gap: 2px;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
    color: #fff;
}
.family-call-btn span {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}
.family-call-btn.audio {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 2px 8px rgba(5,150,105,0.3);
}
.family-call-btn.video {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}
.family-call-btn:not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.family-call-btn:disabled,
.family-call-btn.dimmed {
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
    cursor: not-allowed;
}

/* Call summary modal */
.call-summary-content h6 {
    font-size: 0.88rem;
    color: #0f172a;
}
.call-summary-content .form-check-label {
    line-height: 1.4;
}
.budget-risk-badge + .call-summary-content { margin-top: 12px; }

/* Dark mode */
[data-bs-theme="dark"] .incoming-call-avatar {
    box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
}
[data-bs-theme="dark"] .active-call-timer { color: #e2e8f0; }
[data-bs-theme="dark"] .call-control-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
[data-bs-theme="dark"] .call-control-btn:hover {
    background: #334155;
    border-color: #475569;
}
[data-bs-theme="dark"] .call-control-btn.call-control-active {
    background: #2d1a1a;
    border-color: #7f1d1d;
    color: #ef4444;
}
[data-bs-theme="dark"] .call-control-btn.call-control-recording {
    background: #2d1a1a;
    border-color: #dc2626;
    color: #ef4444;
}
[data-bs-theme="dark"] .call-recording-indicator { color: #ef4444; }
[data-bs-theme="dark"] .call-summary-content h6 { color: #e2e8f0; }
[data-bs-theme="dark"] .call-online-dot { border-color: #1e293b; }
[data-bs-theme="dark"] .incoming-call-type { color: #94a3b8; }

/* Dark mode — family member cards & call buttons */
[data-bs-theme="dark"] .family-member-card {
    background: #1e293b;
    border-color: #334155;
}
[data-bs-theme="dark"] .family-post-online-dot { border-color: #0f172a; }

/* Celebration Banner */
.celebration-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 0 6px;
    font-size: 0.83rem;
    color: #92400e;
    position: relative;
}
.celebration-item { font-size: 0.83rem; }
.celebration-sep { color: #d97706; font-weight: 700; }
.celebration-dismiss {
    position: absolute; top: 6px; right: 8px;
    background: none; border: none; cursor: pointer;
    color: #d97706; font-size: 1rem; line-height: 1; padding: 0;
}
[data-bs-theme="dark"] .celebration-banner {
    background: linear-gradient(135deg, #1c1502, #2d2200);
    border-color: #a16207;
    color: #fde68a;
}

/* Member birthday/anniversary tags */
.family-member-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}
.family-member-date-tag {
    font-size: 0.72rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    border-radius: 6px;
    padding: 2px 7px;
}
.family-member-edit-dates-btn {
    font-size: 0.72rem;
    background: none;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 2px 7px;
    color: #6b7280;
    cursor: pointer;
}
.family-member-edit-dates-btn:hover { border-color: #22c55e; color: #16a34a; }
[data-bs-theme="dark"] .family-member-date-tag { background: #14532d; border-color: #166534; color: #86efac; }
[data-bs-theme="dark"] .family-member-edit-dates-btn { border-color: #374151; color: #9ca3af; }

[data-bs-theme="dark"] .family-call-btn:disabled,
[data-bs-theme="dark"] .family-call-btn.dimmed {
    background: #334155;
    color: #64748b;
}
[data-bs-theme="dark"] .family-member-presence.is-online { background: #14532d; color: #4ade80; }
[data-bs-theme="dark"] .family-member-presence.is-offline { background: #1e293b; color: #64748b; }

/* ===== FAMILY GROUP CHAT ===== */
.family-chat-tab-btn { position: relative; }
.family-chat-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    background: #ef4444; color: #fff;
    border-radius: 8px;
    font-size: 0.62rem; font-weight: 700;
    line-height: 16px; text-align: center;
    padding: 0 3px; pointer-events: none;
}

/* --- Chat-mode layout lock --- */
/* When the Chat tab is active, freeze the outer scroll so the messages
   area fills the screen and the composer sticks to the bottom. */
.family-detail-area.chat-tab-active {
    overflow: hidden;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}
.family-detail-area.chat-tab-active .family-detail-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important;
}
.family-detail-area.chat-tab-active .family-tab-bar {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* --- Chat container --- */
.family-chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    /* Negate the parent px-3 padding so the chat goes edge-to-edge */
    margin-left: -12px;
    margin-right: -12px;
}

/* --- Messages list --- */
.family-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: #f0fdf4;
}
.family-chat-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1;
    padding: 48px 24px;
    pointer-events: none;
}
/* Legacy dead classes — kept to prevent errors on stale SW cache */
.family-chat-msg,
.family-chat-msg-mine,
.family-chat-msg-theirs,
.family-chat-name,
.family-chat-bubble,
.family-chat-time { display: none; }

/* --- Composer bar --- */
.family-chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px;
    /* Respects iPhone home-bar / notch on bottom */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #d1fae5;
    background: #fff;
    flex-shrink: 0;
    position: relative;
}
.family-chat-input {
    flex: 1;
    border: 1.5px solid #d1d5db;
    border-radius: 22px;
    padding: 8px 14px;
    font-size: 0.875rem;
    resize: none;
    outline: none;
    line-height: 1.45;
    max-height: 120px;
    overflow-y: auto;
    background: #f9fafb;
    color: #111827;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.family-chat-input:focus {
    border-color: #22c55e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}
.family-chat-send-btn {
    width: 40px; height: 40px;
    background: linear-gradient(145deg, #22c55e, #15803d);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    box-shadow: 0 2px 8px rgba(34,197,94,0.38);
}
.family-chat-send-btn:hover:not(:disabled) { transform: scale(1.08); }
.family-chat-send-btn:active:not(:disabled) { transform: scale(0.93); box-shadow: none; }
.family-chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.family-chat-voice-btn {
    width: 40px;
    height: 40px;
    background: #ffffff;
    color: #15803d;
    border: 1.5px solid #bbf7d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, background 0.12s, color 0.12s;
    box-shadow: 0 2px 8px rgba(21, 128, 61, 0.16);
}

.family-chat-voice-btn:hover:not(:disabled) { transform: scale(1.08); }
.family-chat-voice-btn:active:not(:disabled) { transform: scale(0.93); box-shadow: none; }
.family-chat-voice-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.family-chat-voice-btn.recording {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
    animation: chatVoicePulse 1.2s ease-in-out infinite;
}

@keyframes chatVoicePulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* --- Scroll-to-bottom FAB --- */
.chat-scroll-bottom-btn {
    position: absolute;
    bottom: 70px; right: 14px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #d1fae5;
    box-shadow: 0 3px 12px rgba(0,0,0,0.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #059669;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.12s;
    z-index: 10;
}
.chat-scroll-bottom-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.chat-scroll-bottom-btn:active { transform: scale(0.92); }
.chat-scroll-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    background: #ef4444; color: #fff;
    border-radius: 9px; font-size: 0.62rem; font-weight: 700;
    line-height: 18px; text-align: center;
    padding: 0 3px; pointer-events: none;
}

/* --- Character counter --- */
.chat-char-counter {
    display: none;
    font-size: 0.68rem; font-weight: 600; color: #f59e0b;
    position: absolute; bottom: 14px; right: 62px;
    pointer-events: none; line-height: 1;
}

/* --- Date separator --- */
.chat-date-sep {
    display: flex; align-items: center;
    margin: 14px 0 8px; gap: 8px;
}
.chat-date-sep::before, .chat-date-sep::after {
    content: ''; flex: 1; height: 1px; background: #bbf7d0;
}
.chat-date-sep span {
    font-size: 0.7rem; font-weight: 600; color: #059669;
    white-space: nowrap; letter-spacing: 0.04em;
    background: #dcfce7; padding: 3px 10px; border-radius: 12px;
}

/* --- Message rows --- */
.chat-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 2px;
    position: relative;
}
.chat-row:not(.chat-grouped) { margin-top: 4px; }
.chat-mine { flex-direction: row-reverse; }

/* Avatar */
.chat-avatar {
    width: 26px; height: 26px; min-width: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.58rem; font-weight: 700; color: #fff;
    flex-shrink: 0; align-self: flex-end;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.chat-avatar-spacer { width: 26px; min-width: 26px; flex-shrink: 0; }

/* Chat body */
.chat-body {
    display: flex; flex-direction: column;
    max-width: 75%; min-width: 0;
}
.chat-sender-name {
    font-size: 0.63rem; font-weight: 600; color: #059669;
    margin-bottom: 2px; padding-left: 10px;
}
.chat-mine .chat-sender-name { display: none; }

/* Bubble wrap */
.chat-bubble-wrap {
    display: flex; align-items: flex-end; gap: 5px;
    position: relative;
}
.chat-mine .chat-bubble-wrap { flex-direction: row-reverse; }

/* Bubbles */
.chat-bubble {
    background: #fff;
    color: #1e293b;
    /* Theirs: round top, square bottom-left (chat style) */
    border-radius: 18px 18px 18px 5px;
    padding: 7px 10px 5px;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.chat-mine .chat-bubble {
    background: linear-gradient(155deg, #22c55e 0%, #15803d 100%);
    color: #fff;
    /* Mine: round top, square bottom-right */
    border-radius: 18px 18px 5px 18px;
    box-shadow: 0 2px 8px rgba(21,128,61,0.28);
}
.chat-text { display: block; white-space: pre-wrap; word-break: break-word; }

/* Timestamps — always visible for own, show for theirs on hover/touch */
.chat-time {
    font-size: 0.62rem;
    align-self: flex-end;
    margin-top: 1px;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
}
/* Always show timestamp in own messages */
.chat-mine .chat-time { color: rgba(255,255,255,0.7); opacity: 1; }
/* Show others' timestamps on hover (desktop) */
.chat-row:hover .chat-time { opacity: 0.55; }
/* On touch devices — always show theirs too for readability */
@media (pointer: coarse) {
    .chat-theirs .chat-time { opacity: 0.45; }
}

/* Delete button */
.chat-del-btn {
    width: 28px; height: 28px;
    border-radius: 50%; border: none;
    background: rgba(0,0,0,0.06);
    color: #ef4444;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0; align-self: center;
    padding: 0;
}
.chat-row:hover .chat-del-btn { opacity: 1; }
.chat-del-btn:hover { background: #fee2e2; }
/* Touch devices: always show delete on own messages */
@media (pointer: coarse) {
    .chat-mine .chat-del-btn { opacity: 0.55; }
    .chat-mine .chat-del-btn:active { opacity: 1; background: #fee2e2; }
}

/* Empty state */
.chat-empty-icon { font-size: 2.8rem; color: #a7f3d0; margin-bottom: 12px; }
.chat-empty-title { font-size: 1.05rem; font-weight: 600; color: #374151; margin-bottom: 6px; }
.chat-empty-sub { font-size: 0.82rem; color: #9ca3af; }

.chat-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    color: #16a34a;
    font-size: 0.66rem;
    font-weight: 600;
}

.chat-typing-indicator .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #16a34a;
    animation: chatTypingDot 1.1s ease-in-out infinite;
}

.chat-typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-indicator .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatTypingDot {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-4px); opacity: 1; }
}

/* --- Chat mode: hide bottom-bar so composer slides into its place --- */
body.chat-mode .bottom-bar { display: none !important; }

/* --- Dark mode --- */
[data-bs-theme="dark"] .family-chat-messages { background: #071910; }
[data-bs-theme="dark"] .family-chat-composer { background: #0f172a; border-color: #14532d; }
[data-bs-theme="dark"] .family-chat-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-bs-theme="dark"] .family-chat-input:focus { border-color: #22c55e; background: #1e293b; box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
[data-bs-theme="dark"] .family-chat-voice-btn { background: #1e293b; border-color: #14532d; color: #4ade80; }
[data-bs-theme="dark"] .family-chat-voice-btn.recording { background: #7f1d1d; border-color: #b91c1c; color: #fff; }
[data-bs-theme="dark"] .chat-bubble { background: #1e293b; color: #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
[data-bs-theme="dark"] .chat-sender-name { color: #4ade80; }
[data-bs-theme="dark"] .chat-del-btn { background: rgba(255,255,255,0.07); }
[data-bs-theme="dark"] .chat-del-btn:hover { background: #450a0a; }
[data-bs-theme="dark"] .chat-scroll-bottom-btn { background: #1e293b; border-color: #14532d; color: #4ade80; }
[data-bs-theme="dark"] .chat-date-sep::before, [data-bs-theme="dark"] .chat-date-sep::after { background: #14532d; }
[data-bs-theme="dark"] .chat-date-sep span { color: #4ade80; background: #14532d; }
[data-bs-theme="dark"] .chat-empty-icon { color: #14532d; }
[data-bs-theme="dark"] .chat-empty-title { color: #94a3b8; }
[data-bs-theme="dark"] .chat-empty-sub { color: #64748b; }

/* ===================================================
   ONBOARDING WIZARD
   =================================================== */
.onboarding-dialog { max-width: 480px; margin: 0 auto; }
.onboarding-card { border-radius: 24px !important; overflow: hidden; }

.onboarding-header {
    background: var(--ako-gradient);
    padding: 20px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.onboarding-logo { display: flex; align-items: center; gap: 10px; }
.onboarding-logo-img { width: 36px; height: 36px; border-radius: 8px; }
.onboarding-logo-text { color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.onboarding-dots { display: flex; gap: 7px; align-items: center; }
.ob-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.35); transition: all 0.25s;
}
.ob-dot.active { background: #fff; width: 22px; border-radius: 4px; }
.ob-dot.done { background: rgba(255,255,255,0.65); }

.onboarding-body { padding: 28px 24px 8px; }
.onboarding-step { animation: obFadeIn 0.3s ease; }

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

.onboarding-icon-wrap {
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin: 0 auto 16px; color: #fff;
}
.ob-purple { background: linear-gradient(135deg,#4F46E5,#7C3AED); }
.ob-blue   { background: linear-gradient(135deg,#0284c7,#06B6D4); }
.ob-amber  { background: linear-gradient(135deg,#D97706,#F59E0B); }
.ob-green  { background: linear-gradient(135deg,#059669,#10B981); }
.ob-red    { background: linear-gradient(135deg,#dc2626,#f87171); }
.ob-success{ background: linear-gradient(135deg,#047857,#10B981); }

.onboarding-title { font-size: 1.25rem; font-weight: 700; text-align: center; color: var(--ako-text); margin-bottom: 8px; }
.onboarding-sub { font-size: 0.88rem; color: var(--ako-text-secondary); text-align: center; margin-bottom: 20px; line-height: 1.6; }

.ob-field { margin-bottom: 18px; }
.ob-label { font-size: 0.78rem; font-weight: 600; color: var(--ako-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: block; }
.ob-input { border-radius: 12px; border: 1.5px solid var(--ako-border); font-size: 0.95rem; padding: 10px 14px; }
.ob-input:focus { border-color: var(--ako-primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }

.ob-toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-tog-btn {
    flex: 1; min-width: 90px; padding: 10px 8px; border-radius: 12px;
    border: 1.5px solid var(--ako-border); background: var(--ako-surface);
    font-size: 0.84rem; font-weight: 500; color: var(--ako-text-secondary);
    cursor: pointer; transition: all 0.2s; text-align: center;
}
.ob-tog-btn.active { border-color: var(--ako-primary); background: #EEF2FF; color: var(--ako-primary); font-weight: 600; }
.ob-tog-eg { display: block; font-size: 0.72rem; color: inherit; margin-top: 2px; opacity: 0.75; }

/* Device install cards */
.ob-device-card { background: var(--ako-bg); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.ob-device-badge {
    display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 600;
    background: var(--ako-surface); border-radius: 20px; padding: 4px 12px; margin-bottom: 12px;
    color: var(--ako-text);
}
.ob-ios .ob-device-badge { border: 1.5px solid #94a3b8; }
.ob-android .ob-device-badge { border: 1.5px solid #4ade80; color: #15803d; }
.ob-desktop .ob-device-badge { border: 1.5px solid #93c5fd; color: #1d4ed8; }
.ob-steps-list { font-size: 0.86rem; color: var(--ako-text); padding-left: 20px; margin: 0; line-height: 1.9; }
.ob-tip { font-size: 0.78rem; background: #fefce8; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; color: #92400e; margin-top: 10px; }
.ob-skip-hint { font-size: 0.78rem; color: var(--ako-text-secondary); text-align: center; margin: 8px 0 0; }

/* Notification status area */
.ob-notif-status { margin-bottom: 16px; }
.ob-notif-on { display: flex; align-items: center; gap: 12px; background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 14px; padding: 14px 16px; }
.ob-notif-off { display: flex; align-items: flex-start; gap: 12px; background: var(--ako-bg); border-radius: 14px; padding: 14px 16px; }
.ob-notif-blocked { background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: 14px; padding: 14px 16px; }
.ob-notif-icon { font-size: 1.6rem; line-height: 1; }
.ob-notif-label { font-size: 0.9rem; font-weight: 600; }
.ob-notif-desc { font-size: 0.78rem; color: var(--ako-text-secondary); margin-top: 2px; }

/* Info card */
.ob-info-card { background: var(--ako-bg); border-radius: 12px; padding: 12px 14px; font-size: 0.82rem; color: var(--ako-text-secondary); line-height: 1.55; display: flex; align-items: flex-start; gap: 6px; }
.ob-info-card strong { color: var(--ako-text); }

/* Toggle setting row */
.ob-toggle-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ako-bg); border-radius: 14px; padding: 14px 16px; }
.ob-setting-info { display: flex; align-items: flex-start; gap: 12px; flex: 1; }
.ob-setting-icon { font-size: 1.3rem; margin-top: 1px; }
.ob-setting-label { font-size: 0.9rem; font-weight: 600; color: var(--ako-text); }
.ob-setting-desc { font-size: 0.78rem; color: var(--ako-text-secondary); margin-top: 2px; }
.ob-switch { width: 2.5em; height: 1.4em; cursor: pointer; }

/* Google status */
.ob-google-status { margin-bottom: 4px; }
.ob-google-connected { display: flex; align-items: center; gap: 10px; background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 14px; padding: 14px 16px; }
.ob-google-disconnected { text-align: center; padding: 8px 0; }

/* Summary list */
.ob-summary-list { display: flex; flex-direction: column; gap: 10px; }
.ob-summary-row { display: flex; align-items: center; gap: 10px; background: var(--ako-bg); border-radius: 12px; padding: 12px 14px; }
.ob-summary-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #fff; flex-shrink: 0; }
.ob-summary-text { font-size: 0.85rem; font-weight: 500; color: var(--ako-text); }
.ob-summary-badge { margin-left: auto; font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.ob-badge-ok  { background: #dcfce7; color: #15803d; }
.ob-badge-off { background: #fee2e2; color: #b91c1c; }
.ob-badge-skip{ background: #f1f5f9; color: #64748b; }

/* Footer */
.onboarding-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px 24px; border-top: 1px solid var(--ako-border); }
.ob-btn-back { margin-right: auto; }
.ob-btn-next  { min-width: 110px; font-weight: 600; }
.ob-btn-finish{ min-width: 140px; font-weight: 600; }
.ob-btn-skip  { font-size: 0.82rem; padding: 6px 10px; }

/* Mobile tweaks */
@media (max-width: 480px) {
    .onboarding-dialog { margin: 8px; max-width: calc(100vw - 16px); }
    .onboarding-body { padding: 20px 18px 6px; }
    .onboarding-footer { padding: 14px 18px 20px; }
}

/* ===================================================
   TRANSIT & LOCATION
   =================================================== */

/* Transit area */
.transit-view-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0 8px; margin-bottom: 4px;
}
.transit-view-header h5 { font-size: 1.1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.transit-view-header h5 i { font-size: 1.15rem; color: var(--ako-primary); }
.transit-header-actions { display: flex; align-items: center; gap: 8px; }
.transit-location-status { font-size: 0.75rem; display: flex; align-items: center; gap: 4px; }
#transitRefreshBtn.spinning i { animation: spin 0.8s linear infinite; }

/* ---- Electronic Departure Board ---- */
.transit-board-header {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, #0c1426 0%, #1a2744 100%);
    border-radius: 14px 14px 0 0; padding: 16px 18px;
    color: #fff;
}
.transit-board-stop-info { display: flex; align-items: center; gap: 12px; }
.transit-board-stop-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(255,255,255,0.12); display: flex;
    align-items: center; justify-content: center;
    font-size: 1.2rem; color: #38bdf8;
}
.transit-board-stop-name { font-weight: 700; font-size: 0.95rem; }
.transit-board-stop-meta { font-size: 0.72rem; color: rgba(255,255,255,0.55); margin-top: 1px; }
.transit-board-live-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.68rem; font-weight: 800; color: #4ade80;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.transit-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80; animation: transit-pulse 1.5s infinite;
}

.transit-board {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
    border-radius: 0 0 14px 14px; overflow: hidden;
    border: 1px solid #1e293b; border-top: none;
}
.transit-board-table-header {
    display: flex; align-items: center; padding: 10px 18px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.35);
}
.tbh-route { width: 68px; flex-shrink: 0; }
.tbh-dest { flex: 1; min-width: 0; }
.tbh-time { width: 72px; flex-shrink: 0; text-align: right; }
.tbh-status { width: 90px; flex-shrink: 0; text-align: right; }

.transit-board-rows { }
.transit-board-row {
    display: flex; align-items: center; padding: 11px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: opacity 0.3s;
}
.transit-board-row:last-child { border-bottom: none; }
.transit-board-row.departed { opacity: 0.35; }

.board-route { width: 68px; flex-shrink: 0; }
.board-route-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 48px; padding: 3px 10px; border-radius: 6px;
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
}
.board-route-badge.route-bus { background: #059669; color: #ffffff; }
.board-route-badge.route-train { background: #2563eb; color: #ffffff; }
.board-route-badge.route-ferry { background: #0891b2; color: #ffffff; }
.board-route-badge.route-tram { background: #d97706; color: #ffffff; }

.board-dest {
    flex: 1; min-width: 0; font-size: 0.82rem; color: #e2e8f0;
    font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 10px;
}

.board-time {
    width: 72px; flex-shrink: 0; text-align: right;
    font-size: 0.85rem; font-weight: 700; color: #cbd5e1;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
}
.board-time.board-due { color: #fbbf24; animation: transit-pulse 1.5s infinite; }
.board-time.board-departed { color: #64748b; font-style: italic; font-weight: 500; }

.board-status { width: 90px; flex-shrink: 0; text-align: right; font-size: 0.7rem; font-weight: 600; }
.board-status-ontime { color: #4ade80; }
.board-status-late { color: #f87171; }
.board-status-early { color: #60a5fa; }
.board-status-due { color: #fbbf24; font-weight: 700; }
.board-status-departed { color: #64748b; }
.board-status-approaching { color: #a78bfa; font-style: italic; }
.board-status-scheduled { color: #94a3b8; font-style: italic; }

.board-time.board-scheduled {
    color: #94a3b8; font-size: 0.82rem; letter-spacing: 0.5px;
}
.board-sched-sub {
    font-size: 0.6rem; color: rgba(255,255,255,0.3); text-decoration: line-through;
    margin-left: 4px;
}
.transit-sched-badge {
    display: inline-block; font-size: 0.55rem; background: rgba(148,163,184,0.2);
    color: #94a3b8; padding: 1px 6px; border-radius: 3px; margin-right: 6px;
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.transit-sched-label {
    font-size: 0.6rem; color: #94a3b8; font-style: italic;
}
.transit-scheduled { color: #94a3b8; }

.transit-board-no-data {
    padding: 30px 20px; text-align: center; color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}
.transit-board-no-data i { font-size: 1.8rem; display: block; margin-bottom: 8px; opacity: 0.5; }
.transit-board-no-data .small { font-size: 0.72rem; margin-top: 4px; }

.transit-board-footer {
    text-align: center; font-size: 0.65rem; color: rgba(255,255,255,0.3);
    padding: 8px 0 12px; border-top: 1px solid rgba(255,255,255,0.06);
}

/* Other stops section */
.transit-other-label {
    font-size: 0.78rem; font-weight: 700; color: var(--ako-text-muted);
    margin-bottom: 8px; display: flex; align-items: center;
}
.transit-other-stop {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--ako-card-bg); border: 1px solid var(--ako-border);
    border-radius: 12px; margin-bottom: 8px; cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.transit-other-stop:hover { border-color: var(--ako-primary); box-shadow: 0 2px 8px rgba(59,130,246,0.08); }
.transit-other-icon {
    width: 36px; height: 36px; border-radius: 9px; display: flex;
    align-items: center; justify-content: center; font-size: 1rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe); flex-shrink: 0;
}
.transit-other-info { flex: 1; min-width: 0; }
.transit-other-name { font-weight: 600; font-size: 0.85rem; color: var(--ako-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transit-other-meta { font-size: 0.72rem; color: var(--ako-text-muted); }

/* Transit stop cards (legacy / expandable) */
.transit-stop-card {
    background: var(--ako-card-bg); border: 1px solid var(--ako-border);
    border-radius: 14px; margin-bottom: 10px; overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.transit-stop-card.expanded { border-color: var(--ako-primary); box-shadow: 0 2px 12px rgba(59,130,246,0.08); }
.transit-stop-header {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    cursor: pointer; transition: background 0.15s;
}
.transit-stop-header:hover { background: var(--ako-bg-secondary); }
.transit-stop-icon {
    width: 38px; height: 38px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: 1.1rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe); flex-shrink: 0;
}
.transit-stop-info { flex: 1; min-width: 0; }
.transit-stop-name { font-weight: 600; font-size: 0.88rem; color: var(--ako-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transit-stop-meta { font-size: 0.73rem; color: var(--ako-text-muted); display: flex; align-items: center; gap: 4px; }
.transit-distance { font-weight: 600; color: var(--ako-primary); }
.transit-code { font-family: var(--bs-font-monospace); font-size: 0.68rem; }
.transit-stop-chevron { color: var(--ako-text-muted); font-size: 0.8rem; transition: transform 0.2s; }

/* Departures panel */
.transit-departures { border-top: 1px solid var(--ako-border); padding: 0; }
.transit-dep-list { padding: 6px 0; }
.transit-dep-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.1s;
}
.transit-dep-row:last-child { border-bottom: none; }
.transit-dep-row:hover { background: var(--ako-bg-secondary); }
.transit-dep-route {
    display: flex; align-items: center; gap: 6px; min-width: 72px; flex-shrink: 0;
}
.transit-route-name { font-weight: 700; font-size: 0.78rem; color: var(--ako-text); }
.transit-dep-dest {
    flex: 1; min-width: 0; font-size: 0.78rem; color: var(--ako-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.transit-dep-time { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.transit-time-badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    border-radius: 6px; font-size: 0.73rem; font-weight: 700;
    background: #f1f5f9; color: var(--ako-text);
}
.transit-time-badge.transit-arriving { background: #fef3c7; color: #92400e; animation: transit-pulse 1.5s infinite; }
.transit-time-badge.transit-soon { background: #dbeafe; color: #1e40af; }
.transit-time-badge.transit-departed { background: #f1f5f9; color: #9ca3af; font-style: italic; }
.transit-time-badge.transit-approaching { background: #ede9fe; color: #6d28d9; }
.transit-dep-row.departed { opacity: 0.55; }
@keyframes transit-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
.transit-scheduled { font-size: 0.68rem; color: var(--ako-text-muted); }
.transit-delay { font-size: 0.65rem; color: #dc2626; font-weight: 600; }
.transit-early { font-size: 0.65rem; color: #16a34a; font-weight: 600; }
.transit-updated { text-align: center; font-size: 0.65rem; color: var(--ako-text-muted); padding: 6px 0 10px; }
.transit-route-label { font-size: 0.68rem; font-weight: 600; color: var(--ako-text-muted); }
.transit-route-pill {
    display: inline-flex; align-items: center; padding: 1px 7px;
    border-radius: 4px; font-size: 0.68rem; font-weight: 800;
    background: #059669; color: #fff; letter-spacing: 0.02em;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}
.transit-approach-badge {
    font-size: 0.62rem; color: #7c3aed; background: #ede9fe;
    padding: 1px 5px; border-radius: 3px; margin-left: 4px; font-weight: 600;
}

/* Transit empty state */
.transit-empty-icon { font-size: 2.5rem; color: var(--ako-text-muted); margin-bottom: 8px; }

/* Dashboard transit widget */
.dash-transit-content { }
.dash-transit-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dash-transit-row:last-child { border-bottom: none; }
.dash-transit-icon {
    width: 32px; height: 32px; border-radius: 8px; display: flex;
    align-items: center; justify-content: center; font-size: 0.95rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe); flex-shrink: 0;
}
.dash-transit-info { flex: 1; min-width: 0; }
.dash-transit-stop { font-weight: 600; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-transit-meta { font-size: 0.68rem; color: var(--ako-text-muted); }
.dash-transit-next { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.dash-transit-dest { font-size: 0.65rem; color: var(--ako-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

/* Location reminder section in task modals */
.location-reminder-section {
    border: 1px dashed var(--ako-border); border-radius: 10px;
    padding: 12px 14px; margin-top: 8px; background: var(--ako-bg-secondary);
}
.location-reminder-section .section-label {
    display: flex; align-items: center; gap: 6px; font-size: 0.78rem;
    font-weight: 600; color: var(--ako-text-muted); margin-bottom: 8px;
}
.location-reminder-section .section-label i { color: var(--ako-primary); }
.loc-input-group {
    display: flex; align-items: center; gap: 6px;
}
.loc-input-group input { flex: 1; }
.loc-input-group .btn { flex-shrink: 0; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; }
.loc-coords-display {
    font-size: 0.7rem; color: var(--ako-text-muted); padding: 4px 0 2px;
    font-family: var(--bs-font-monospace);
}
.loc-radius-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.loc-radius-row label { font-size: 0.75rem; color: var(--ako-text-muted); margin: 0; white-space: nowrap; }
.loc-radius-row select { max-width: 120px; font-size: 0.82rem; }
.loc-clear-btn { font-size: 0.72rem; margin-top: 6px; }

/* Settings location card */
.settings-location-card { border-radius: 12px; }
.settings-location-card .form-check-label { font-weight: 600; }

/* ===== DRIVE-TIME SMART REMINDERS ===== */

/* Drive-time badge on tasks */
.drive-time-tag { gap: 4px; }
.drive-badge-ok { background: #f0fdf4 !important; color: #16a34a !important; }
.drive-badge-medium { background: #fffbeb !important; color: #d97706 !important; }
.drive-badge-long { background: #fef2f2 !important; color: #dc2626 !important; }
.drive-meta i { color: #6366f1; }

/* Navigate button in task detail */
.task-nav-btn {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
}
.task-nav-btn:hover { background: linear-gradient(135deg, #4f46e5, #4338ca); color: #fff; }

/* Dashboard Route Timeline Widget */
.dash-route { border-left: 3px solid #6366f1; }
.route-timeline { padding: 8px 0; }
.route-stop {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 4px;
    position: relative;
}
.route-stop-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef2ff;
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid #c7d2fe;
}
.route-start .route-stop-marker { background: #6366f1; color: #fff; border-color: #6366f1; }
.route-stop-num { font-size: 0.72rem; }
.route-stop-info { flex: 1; min-width: 0; }
.route-stop-name { font-weight: 600; font-size: 0.88rem; color: var(--ako-text-primary); }
.route-stop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--ako-text-muted);
    margin-top: 2px;
}
.route-stop-meta i { margin-right: 2px; }
.route-stop-leave {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6366f1;
    margin-top: 3px;
}
.route-stop-soon .route-stop-leave { color: #d97706; }
.route-stop-late .route-stop-leave { color: #dc2626; }
.route-stop-soon .route-stop-marker { border-color: #d97706; background: #fffbeb; color: #d97706; }
.route-stop-late .route-stop-marker { border-color: #dc2626; background: #fef2f2; color: #dc2626; }

.route-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef2ff;
    color: #6366f1;
    border: 1px solid #c7d2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.82rem;
    text-decoration: none;
    transition: all 0.2s;
    align-self: center;
}
.route-nav-btn:hover { background: #6366f1; color: #fff; }

.route-leg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 0 17px;
}
.route-leg-line {
    width: 2px;
    height: 20px;
    background: repeating-linear-gradient(to bottom, #c7d2fe 0, #c7d2fe 4px, transparent 4px, transparent 8px);
    flex-shrink: 0;
}
.route-leg-info {
    font-size: 0.72rem;
    color: var(--ako-text-muted);
    padding: 2px 0;
}
.route-leg-info i { color: #6366f1; margin-right: 3px; }

.route-actions {
    padding: 10px 4px 4px;
    text-align: center;
}

/* ===== FORMS ===== */
.forms-area, .form-detail-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}

/* ===== INBOX ===== */
.inbox-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}

.inbox-content {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 12px 14px 0;
}

.inbox-area .feature-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0 0;
}

.inbox-area .feature-header-row h4 {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.inbox-area > .inbox-content > .text-muted.small {
    padding: 0;
    margin-bottom: 12px !important;
    font-size: 0.92rem;
    line-height: 1.45;
}

.inbox-tabs {
    padding: 0;
    margin-bottom: 14px !important;
}

#inboxList {
    padding: 0;
}

#inboxList .card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
    margin-bottom: 10px !important;
}

#inboxList .card:last-child {
    margin-bottom: 0 !important;
}

#inboxEmptyState {
    min-height: 46dvh;
    padding-top: 36px;
}

@media (max-width: 576px) {
    .inbox-content {
        padding: 10px 10px 0;
    }

    .inbox-area .feature-header-row h4 {
        font-size: 1.18rem;
    }

    .inbox-area > .inbox-content > .text-muted.small {
        font-size: 0.86rem;
        margin-bottom: 10px !important;
    }

    .inbox-tabs {
        margin-bottom: 12px !important;
        gap: 6px !important;
    }

    .inbox-tabs .btn {
        padding: 0.3rem 0.85rem;
        font-size: 0.78rem;
    }

    #inboxList .card {
        border-radius: 12px;
    }

    #inboxEmptyState {
        min-height: 42dvh;
        padding-top: 20px;
    }
}

.forms-area .feature-header-row,
.form-detail-area .feature-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 8px;
}

.forms-area .feature-header-row h4 {
    font-size: 1.1rem;
    white-space: nowrap;
}

.forms-area #formsList,
.form-detail-area .form-detail-header,
.form-detail-area .form-detail-tabs,
.form-detail-area #formBuilderPanel,
.form-detail-area #formResponsesPanel {
    padding-left: 12px;
    padding-right: 12px;
}

.form-detail-area .feature-header-row {
    flex-wrap: wrap;
}

#formBackBtn {
    flex-shrink: 0;
}

.forms-detail-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.forms-detail-actions .btn {
    border-radius: 999px;
    padding: 5px 9px;
    line-height: 1;
}

@media (max-width: 576px) {
    .forms-area .feature-header-row,
    .form-detail-area .feature-header-row {
        padding: 12px 10px 8px;
    }

    .forms-area #formsList,
    .form-detail-area .form-detail-header,
    .form-detail-area .form-detail-tabs,
    .form-detail-area #formBuilderPanel,
    .form-detail-area #formResponsesPanel {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 420px) {
    #formBackBtn {
        width: 100%;
    }

    .forms-detail-actions {
        width: 100%;
        justify-content: space-between;
    }

    .forms-detail-actions .btn {
        flex: 1 1 calc(20% - 6px);
        min-width: 34px;
    }
}

.form-card {
    background: var(--ako-card-bg);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.15s, box-shadow 0.15s;
}
.form-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.form-card .form-card-color {
    width: 4px;
    border-radius: 4px;
    min-height: 40px;
    flex-shrink: 0;
}
.form-card-title { font-weight: 600; font-size: 0.95rem; }
.form-card-meta { font-size: 0.78rem; color: var(--ako-text-secondary); }
.form-card-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}
.form-card-badge.active { background: #dcfce7; color: #15803d; }
.form-card-badge.draft { background: #fef3c7; color: #92400e; }
.form-card-badge.closed { background: #f3f4f6; color: #6b7280; }

.form-detail-tabs {
    display: flex; border-bottom: 2px solid #e5e7eb; gap: 0;
}
.form-detail-tab {
    flex: 1; text-align: center; padding: 10px 0; font-size: 0.85rem;
    font-weight: 600; color: var(--ako-text-secondary); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.form-detail-tab.active {
    color: var(--ako-primary); border-bottom-color: var(--ako-primary);
}

.form-field-card {
    background: var(--ako-card-bg);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: box-shadow 0.15s;
}
.form-field-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.form-field-type-badge {
    font-size: 0.68rem; font-weight: 600;
    padding: 1px 6px; border-radius: 4px;
    background: #ede9fe; color: #6d28d9;
}
.form-field-actions .btn { padding: 2px 6px; font-size: 0.82rem; }

.form-response-card {
    background: var(--ako-card-bg);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.form-response-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.form-color-dot {
    width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
    display: inline-block;
}
.form-color-dot:hover { transform: scale(1.15); }
.form-color-dot.selected { border-color: var(--ako-text); transform: scale(1.15); }

.field-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.field-type-option {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 8px 4px;
    border: 2px solid rgba(0,0,0,0.06); border-radius: 10px;
    cursor: pointer; font-size: 0.72rem; font-weight: 500;
    color: var(--ako-text-secondary);
    transition: border-color 0.15s, background 0.15s;
}
.field-type-option i { font-size: 1.2rem; }
.field-type-option:hover { border-color: var(--ako-primary-light); background: #f5f3ff; }
.field-type-option.selected {
    border-color: var(--ako-primary); background: #ede9fe;
    color: var(--ako-primary-dark); font-weight: 600;
}

.form-empty-state {
    text-align: center; padding: 40px 20px; color: var(--ako-text-secondary);
}
.form-empty-state i { font-size: 3rem; opacity: 0.3; }

.form-stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.form-stat-card {
    text-align: center; padding: 12px 8px;
    background: var(--ako-card-bg); border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
}
.form-stat-value { font-size: 1.4rem; font-weight: 700; }
.form-stat-label { font-size: 0.7rem; color: var(--ako-text-secondary); }

[data-bs-theme="dark"] .form-card { border-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .form-field-card { border-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .form-response-card { border-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .form-stat-card { border-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .field-type-option { border-color: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .field-type-option:hover { background: rgba(99,102,241,0.1); }
[data-bs-theme="dark"] .field-type-option.selected { background: rgba(99,102,241,0.2); }
[data-bs-theme="dark"] .form-field-type-badge { background: rgba(99,102,241,0.2); color: #a78bfa; }

/* Google Places Autocomplete dropdown styling */
.pac-container {
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    border: 1px solid #e5e7eb !important;
    margin-top: 4px;
    font-family: 'Montserrat', sans-serif !important;
    z-index: 200000 !important;
}
/* Ensure pac-container is above modal backdrop + fullscreen modal */
body.modal-open .pac-container {
    z-index: 200000 !important;
}
.pac-item {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    border-top: 1px solid #f3f4f6 !important;
    cursor: pointer;
}
.pac-item:first-child { border-top: none !important; }
.pac-item:hover { background: #f0f9ff !important; }
.pac-item-query { font-weight: 600 !important; font-size: 0.85rem !important; }
.pac-icon { display: none !important; }
.pac-matched { font-weight: 700 !important; }

/* Mobile: full-width pac-container for better touch targets in fullscreen modals */
@media (max-width: 575.98px) {
    .pac-container {
        width: calc(100vw - 32px) !important;
        left: 16px !important;
        max-height: 40vh !important;
        overflow-y: auto !important;
    }
}

.directory-conversation-status {
    font-size: 0.64rem;
    font-weight: 700;
    color: #475569;
    background: #e2e8f0;
    border-radius: 999px;
    padding: 2px 8px;
}