/* ========================================
   KYSTENO UI REFRESH - Claude-Clean Aesthetic
   This file overrides existing styles for a modern look
   ======================================== */

/* ===== COLOR PALETTE =====
   Canonical tokens live in styles.css :root.
   This file intentionally does NOT redeclare --primary / --border / --text / --main-bg etc.
   Only dark-mode overrides kept below. */

/* Auth screen uses the unified indigo-violet brand (green teal retired) */
.auth-btn {
    background: var(--primary) !important;
}

.auth-btn:hover {
    background: var(--primary-hover) !important;
}

.auth-tab.active {
    color: var(--primary) !important;
}

.auth-tab.active::after {
    background: var(--primary) !important;
}

.auth-input:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

/* Dark Mode */
.dark-mode {
    --sidebar-bg: #111827;
    --sidebar-hover: #1F2937;
    --sidebar-active: #374151;
    --sidebar-text: #F9FAFB;
    --sidebar-muted: #9CA3AF;
    --main-bg: #0F172A;
    --card-bg: #1E293B;
    --border: #374151;
    --border-light: #1F2937;
    --text: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --bg-hover: #1F2937;
    --bg-input: #111827;
}

/* ===== TYPOGRAPHY ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== SIDEBAR REFRESH ===== */
.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    box-shadow: none;
}

.sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

/* Workspace header */
.workspace-header {
    padding: 12px 16px;
    background: transparent;
    border-radius: 0;
}

.workspace-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.workspace-info h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--sidebar-text);
}

.workspace-info span {
    font-size: 11px;
    color: var(--sidebar-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Search box */
.sidebar-search {
    margin: 12px 16px;
}

.sidebar-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    background: var(--sidebar-hover);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    color: var(--sidebar-text);
    transition: all 0.15s;
}

.sidebar-search input:focus {
    background: var(--card-bg);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

.sidebar-search input::placeholder {
    color: var(--sidebar-muted);
}

/* Section headers */
.section-header,
.sidebar-section-title,
.nav-section-title,
.sidebar-quick-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sidebar-muted);
    padding: 16px 16px 8px;
    margin: 0;
}

.sidebar-quick-header {
    padding: 10px 16px;
}

.sidebar-quick-header:hover {
    color: var(--sidebar-text);
}

/* Sidebar quick section */
.sidebar-quick-section {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    padding-bottom: 8px;
}

.sidebar-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    margin: 2px 8px;
    border-radius: 8px;
    color: var(--sidebar-text);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
}

.sidebar-quick-item:hover {
    background: var(--sidebar-hover);
}

.sidebar-quick-item.active {
    background: var(--sidebar-active);
}

.sidebar-quick-item i {
    opacity: 0.7;
    font-size: 16px;
}

.sidebar-quick-item-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-quick-item-star.starred {
    color: #F59E0B;
}

/* Tree items / Navigation items */
.tree-item-header,
.nav-item,
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    margin: 2px 8px;
    border-radius: 8px;
    color: var(--sidebar-text);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
}

.tree-item-header:hover,
.nav-item:hover,
.sidebar-item:hover {
    background: var(--sidebar-hover);
}

.tree-item-header.active,
.nav-item.active,
.sidebar-item.active,
.tree-item.selected > .tree-item-header {
    background: var(--sidebar-active);
    color: var(--sidebar-text);
}

/* Tree icons */
.tree-icon-btn,
.tree-icon {
    font-size: 16px;
    opacity: 0.7;
}

.tree-label {
    flex: 1;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tree expand/collapse */
.tree-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: transform 0.15s;
}

.tree-item.expanded > .tree-item-header .tree-toggle {
    transform: rotate(90deg);
}

/* Action buttons in sidebar */
.tree-actions {
    opacity: 0;
    transition: opacity 0.15s;
}

.tree-item-header:hover .tree-actions {
    opacity: 1;
}

.tree-action-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--sidebar-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.tree-action-btn:hover {
    background: var(--sidebar-active);
    color: var(--primary);
}

/* Sidebar footer / User menu */
.sidebar-footer,
.user-menu {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
}

.user-email {
    font-size: 13px;
    color: var(--sidebar-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.user-action-btn {
    flex: 1;
    padding: 8px;
    background: var(--sidebar-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--sidebar-text);
    cursor: pointer;
    transition: all 0.15s;
}

.user-action-btn:hover {
    background: var(--sidebar-active);
    border-color: var(--sidebar-active);
    color: var(--primary);
}

.logout-btn {
    width: 100%;
    padding: 10px;
    background: var(--sidebar-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--sidebar-text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.logout-btn:hover {
    background: var(--sidebar-active);
    border-color: var(--sidebar-active);
}

/* ===== MAIN CONTENT AREA ===== */
.main-content,
.content-area {
    background: var(--main-bg);
}

/* Dashboard */
.dashboard {
    padding: 32px;
    background: var(--main-bg);
}

.dashboard-header {
    margin-bottom: 24px;
}

.dashboard-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

/* Dashboard filter tabs */
.dashboard-filters,
.filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.filter-tab,
.dashboard-tab {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.filter-tab:hover,
.dashboard-tab:hover {
    background: var(--sidebar-hover);
    border-color: var(--sidebar-active);
    color: var(--text);
}

.filter-tab.active,
.dashboard-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ===== TABLES ===== */
.toc-table-container {
    background: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.toc-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.toc-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: rgba(243, 244, 246, 0.5);
    border-bottom: 1px solid var(--border);
}

.toc-table td {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    background: transparent;
}

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

.toc-table tbody tr {
    position: relative;
    transition: background 0.1s;
}
.toc-table tbody tr:hover td {
    background: rgba(79, 70, 229, 0.06);
}
.toc-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}
.toc-table tbody tr:hover .toc-name {
    color: var(--primary);
}

.dark-mode .toc-table tbody tr:hover td {
    background: rgba(79, 70, 229, 0.12);
}

.toc-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text);
}

.toc-name:hover {
    color: var(--primary);
}

.toc-icon {
    font-size: 16px;
    opacity: 0.7;
}

.toc-parent,
.toc-project {
    color: var(--text-muted);
    font-size: 13px;
}

.toc-date {
    color: var(--text-muted);
    font-size: 13px;
}

/* Filter buttons */
.filter-btn {
    padding: 8px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.filter-btn:hover {
    background: var(--sidebar-hover);
    border-color: var(--sidebar-active);
    color: var(--text);
}

.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.filter-count {
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 4px;
}

.filter-btn.active .filter-count {
    background: rgba(255, 255, 255, 0.25);
}

/* ===== BUTTONS ===== */
.btn,
button.primary,
.btn-primary {
    padding: 10px 18px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn:hover,
button.primary:hover,
.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--sidebar-hover);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--sidebar-active);
    border-color: var(--sidebar-active);
}

/* ===== MODALS ===== */
.modal-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border);
}

.modal h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
}

.modal-input,
.modal input,
.modal textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--sidebar-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    transition: all 0.15s;
}

.modal-input:focus,
.modal input:focus,
.modal textarea:focus {
    background: var(--card-bg);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ===== EDITOR ===== */
.page-header {
    padding: 20px 32px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
}

.page-title-input {
    font-size: 28px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text);
    width: 100%;
    padding: 0;
}

.page-title-input:focus {
    outline: none;
}

.page-title-input::placeholder {
    color: var(--text-muted);
}


/* ===== CONTEXT MENU ===== */
.context-menu {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 6px;
    z-index: 10000;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.1s;
}

.context-menu-item:hover {
    background: var(--sidebar-hover);
}

.context-menu-item.danger {
    color: var(--danger);
}

.context-menu-item.danger:hover {
    background: #FEE2E2;
}

.dark-mode .context-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.context-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* ===== TOAST NOTIFICATIONS ===== */
.anchor-copied-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 14px 24px;
    font-size: 14px;
    z-index: 10000;
    animation: toastIn 0.2s ease-out;
}

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

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

::-webkit-scrollbar-track {
    background: transparent;
}

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

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

/* ===== FILE MANAGER ===== */
.file-manager {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.file-manager-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.file-manager-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--sidebar-hover);
}

.file-manager-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.file-manager-tab:hover {
    background: var(--card-bg);
    color: var(--text);
}

.file-manager-tab.active {
    background: var(--card-bg);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ===== WATERMARK ===== */
.dashboard-watermark,
.content-watermark {
    opacity: 0.03;
}

/* ===== QUICK ACTIONS ===== */
.quick-actions,
.action-bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--sidebar-hover);
    border-radius: 10px;
    margin-bottom: 16px;
}

.quick-action-btn {
    padding: 8px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ===== SECTION COLLAPSIBLES ===== */
.collapsible-header,
.section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.collapsible-header:hover,
.section-toggle:hover {
    background: var(--sidebar-hover);
}

/* ===== EMPTY STATES ===== */
.empty-state {
    text-align: center;
    padding: 60px 40px;
    color: var(--text-muted);
}

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

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s ease !important;
        width: 280px !important;
        min-width: 280px !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .dashboard {
        padding: 20px;
    }
}

/* ===== PAGE INFO PANEL REDESIGN ===== */

/* Status badge at top */
.page-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 16px;
}

.page-status-badge.status-draft {
    background: #FEF3C7;
    color: #92400E;
}

.page-status-badge.status-active {
    background: #D1FAE5;
    color: #065F46;
}

.page-status-badge.status-deprecated {
    background: #FEE2E2;
    color: #991B1B;
}

.page-status-badge.status-archived {
    background: var(--border);
    color: #4B5563;
}

.dark-mode .page-status-badge.status-draft {
    background: rgba(251, 191, 36, 0.2);
    color: #FBBF24;
}

.dark-mode .page-status-badge.status-active {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.dark-mode .page-status-badge.status-deprecated {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.dark-mode .page-status-badge.status-archived {
    background: rgba(107, 114, 128, 0.2);
    color: #9CA3AF;
}

.page-status-badge.status-review {
    background: #DBEAFE;
    color: #1E40AF;
}

.dark-mode .page-status-badge.status-review {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

/* ===== APPROVAL WORKFLOW ===== */
.approval-section {
    padding: 12px;
    background: var(--sidebar-hover);
    border-radius: 8px;
    margin-bottom: 16px;
}

.approval-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.approval-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.approval-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.approval-badge.pending {
    background: #DBEAFE;
    color: #1E40AF;
}

.approval-badge.approved {
    background: #D1FAE5;
    color: #065F46;
}

.approval-badge.rejected {
    background: #FEE2E2;
    color: #991B1B;
}

.dark-mode .approval-badge.pending { background: rgba(59,130,246,0.2); color: #60A5FA; }
.dark-mode .approval-badge.approved { background: rgba(16,185,129,0.2); color: #10B981; }
.dark-mode .approval-badge.rejected { background: rgba(239,68,68,0.2); color: #EF4444; }

.approval-reviewer {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.approval-reviewer strong {
    color: var(--text);
}

.approval-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.approval-btn {
    flex: 1;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    transition: all 0.15s;
}

.approval-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.approval-btn.approve {
    background: #D1FAE5;
    border-color: #6EE7B7;
    color: #065F46;
}

.approval-btn.reject {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #991B1B;
}

.dark-mode .approval-btn.approve { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.4); color: #10B981; }
.dark-mode .approval-btn.reject { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #EF4444; }

/* Review History */
.review-history-list {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.review-history-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

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

.review-history-meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 11px;
}

.review-history-comment {
    color: var(--text);
    font-style: italic;
}

/* Owner section */
.page-owner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--sidebar-hover);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 16px;
}

.page-owner:hover {
    background: var(--sidebar-active);
}

.owner-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
}

.owner-info {
    flex: 1;
}

.owner-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.owner-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

/* Metadata section */
.gutter-meta {
    margin-bottom: 16px;
}

.gutter-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.gutter-meta-row:last-child {
    border-bottom: none;
}

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

.gutter-meta-value {
    color: var(--text);
    font-weight: 500;
}

/* Content Audit */
.gutter-audit {
    margin-bottom: 16px;
}

.gutter-audit-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.gutter-audit-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gutter-audit-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--sidebar-hover);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text);
    font-weight: 500;
}

.gutter-audit-badge i {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

/* Last Reviewed */
.page-reviewed {
    padding: 12px;
    background: var(--sidebar-hover);
    border-radius: 8px;
    margin-bottom: 16px;
}

.reviewed-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.reviewed-label {
    font-size: 12px;
    color: var(--text-muted);
}

.reviewed-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.reviewed-date.stale {
    color: var(--danger);
}

.mark-reviewed-btn {
    width: 100%;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
}

.mark-reviewed-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Markers Section (Collapsible) */
.gutter-markers-section {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.gutter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
}

.gutter-section-header:hover {
    color: var(--primary);
}

.gutter-markers-toggle {
    transition: transform 0.2s;
    color: var(--text-muted);
}

.gutter-markers-section.collapsed .gutter-markers-toggle {
    transform: rotate(-90deg);
}

.gutter-markers-section.collapsed .gutter-markers-content {
    display: none;
}

.gutter-markers-content {
    padding-top: 8px;
}

.add-marker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    background: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 8px;
}

.add-marker-btn:hover {
    border-color: var(--primary);
    border-style: solid;
    color: var(--primary);
    background: var(--accent-glow);
}

/* Marker items */
.gutter-marker-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--sidebar-hover);
    border-radius: 8px;
    margin-bottom: 8px;
}

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

/* ===== DASHBOARD WIDGETS PANEL ===== */
.dashboard-layout {
    display: flex;
    padding: 16px;
    padding-right: 0;
    width: 100%;
    min-height: calc(100vh - 120px);
}

.dashboard-main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding-right: 24px;
}

.dashboard-container {
    width: 100%;
    max-width: 100%;
}

.dashboard-widgets {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: visible;
    overflow: visible;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: auto;
    min-height: 100%;
    background: #F9FAFB;
    border-left: 1px solid var(--border);
    border-radius: 0;
    padding: 16px;
}

.dashboard-widgets::-webkit-scrollbar {
    width: 6px;
}

.dashboard-widgets::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Widget base */
.widget {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
}

.widget-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.widget-header:hover {
    background: var(--sidebar-hover);
}

.widget-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.widget-badge {
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 8px;
}

.widget-badge:empty {
    display: none;
}

.widget-toggle {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.widget.collapsed .widget-toggle {
    transform: rotate(-90deg);
}

.widget.collapsed .widget-content {
    display: none;
}

.widget-content {
    padding: 0 16px 16px;
}

.widget-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 8px;
}

.widget-add-btn:hover {
    border-color: var(--primary);
    border-style: solid;
    color: var(--primary);
    background: var(--accent-glow);
}

/* Daily Inspiration */
.inspiration-quote {
    font-size: 14px;
    font-style: italic;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 8px;
}

.inspiration-author {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}

/* ===== DAILY FOCUS CARD (Figma 2026) ===== */
.daily-focus-card {
    background: linear-gradient(135deg, #F5F3FF 0%, #E0E7FF 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 8px;
}
.daily-focus-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.daily-focus-star {
    font-size: 14px;
}
.daily-focus-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--ai);
}
.daily-focus-quote {
    font-size: 13px;
    font-style: italic;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 6px;
}
.daily-focus-author {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}

/* Mini Calendar */
.mini-calendar {
    width: 100%;
}

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

.calendar-nav-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    transition: all 0.15s;
}

.calendar-nav-btn:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}

.calendar-month {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

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

.calendar-day-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px;
}

.calendar-day {
    font-size: 12px;
    padding: 6px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text);
}

.calendar-day:hover {
    background: var(--sidebar-hover);
}

.calendar-day.today {
    background: var(--primary);
    color: white;
    font-weight: 600;
}

.calendar-day.other-month {
    color: var(--text-muted);
    opacity: 0.5;
}

.calendar-day.has-event {
    position: relative;
}

.calendar-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
}

/* Tasks */
.task-list {
    max-height: 200px;
    overflow-y: auto;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

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

.task-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.task-checkbox:hover {
    border-color: var(--primary);
}

.task-checkbox.checked {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.task-text {
    flex: 1;
    font-size: 13px;
    color: var(--text);
}

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

.task-delete {
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    transition: all 0.15s;
}

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

.task-delete:hover {
    color: var(--danger);
}

.task-add {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.task-add input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--sidebar-hover);
    color: var(--text);
}

.task-add input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--card-bg);
}

.task-add-btn {
    padding: 8px 12px;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: background 0.15s;
}

.task-add-btn:hover {
    background: var(--primary-hover);
}

/* Goals */
.goals-list {
    max-height: 200px;
    overflow-y: auto;
}

.goal-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

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

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

.goal-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

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

.goal-progress-bar {
    height: 6px;
    background: var(--sidebar-hover);
    border-radius: 3px;
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s;
}

/* Reminders */
.reminders-list {
    max-height: 200px;
    overflow-y: auto;
}

.reminder-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

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

.reminder-icon {
    width: 32px;
    height: 32px;
    background: var(--accent-glow);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.reminder-content {
    flex: 1;
}

.reminder-text {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 2px;
}

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

.reminder-time.overdue {
    color: var(--danger);
}

/* Quick Links */
.links-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--sidebar-hover);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.link-item:hover {
    background: var(--sidebar-active);
}

.link-favicon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.link-title {
    flex: 1;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-delete {
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
}

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

/* Scratchpad */
.scratchpad-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--sidebar-hover);
    color: var(--text);
    resize: vertical;
}

.scratchpad-textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--card-bg);
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-layout {
        flex-direction: column;
    }
    
    .dashboard-widgets {
        width: 100%;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .widget {
        flex: 1 1 300px;
    }
}

@media (max-width: 768px) {
    .dashboard-widgets {
        flex-direction: column;
    }
    
    .widget {
        flex: 1 1 auto;
    }
}

/* ===== DASHBOARD LOGO - 75% LARGER ===== */
.dashboard-logo-small {
    width: 105px !important;
    height: 105px !important;
}

/* ===== SESSION WARNING MODAL ===== */
.session-warning-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.session-warning-modal.show {
    display: flex;
}

.session-warning-content {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.2s ease;
}

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

.session-warning-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.session-warning-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px 0;
}

.session-warning-content p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.session-extend-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.session-extend-btn:hover {
    background: var(--primary-hover);
}


/* ========== SEARCH FILTER BAR ========== */
.search-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 12px 4px;
}

.search-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-filter-bar select {
    flex: 1;
    font-size: 11px;
    padding: 5px 22px 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748B'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 0;
}

.search-filter-bar select:focus {
    border-color: var(--primary);
}

.dark-mode .search-filter-bar select {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
}

.search-filter-reset {
    flex-shrink: 0;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: all 0.15s;
}

.search-filter-reset:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* ========== SEARCH RESULT CARDS ========== */
.sidebar-search-result {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid transparent;
}

.sidebar-search-result:hover {
    background: var(--sidebar-hover);
    border-color: var(--border);
}

.dark-mode .sidebar-search-result:hover {
    background: #1e293b;
}

.search-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-result-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.search-result-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-snippet {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Highlighted matches from ts_headline */
.search-result-snippet mark {
    background: rgba(79, 70, 229, 0.18);
    color: var(--primary);
    border-radius: 2px;
    padding: 0 2px;
    font-weight: 600;
}

.dark-mode .search-result-snippet mark {
    background: rgba(79, 70, 229, 0.25);
    color: var(--primary-muted);
}

/* Labels row */
.search-result-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.search-label-chip {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 10px;
    letter-spacing: 0.2px;
}

/* Footer row */
.search-result-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.search-result-tag {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 7px;
    background: var(--sidebar-active);
    border-radius: 10px;
    color: var(--text-muted);
    text-transform: capitalize;
    letter-spacing: 0.2px;
}

.search-result-tag.type-chip {
    background: rgba(79, 70, 229, 0.12);
    color: var(--primary);
}

.dark-mode .search-result-tag {
    background: #334155;
    color: #94a3b8;
}

.search-result-meta {
    font-size: 10.5px;
    color: var(--text-muted);
}

.search-result-meta + .search-result-meta::before {
    content: '·';
    margin-right: 6px;
    opacity: 0.5;
}

/* Loading state */
.search-loading {
    opacity: 0.6;
    font-style: italic;
}
/* ===== GUTTER CONTENT MAP ===== */
.gutter-contentmap-section {
    border-top: 1px solid var(--border);
}

.gutter-contentmap-section.collapsed .gutter-contentmap-toggle {
    transform: rotate(-90deg);
}

.gutter-contentmap-section.collapsed .gutter-contentmap-list {
    display: none;
}

.gutter-contentmap-toggle {
    transition: transform 0.2s;
    color: var(--text-muted);
    flex-shrink: 0;
}

.gutter-contentmap-list {
    padding: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.contentmap-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    text-decoration: none;
}

.contentmap-item:hover {
    background: var(--sidebar-hover);
}

.contentmap-item:active {
    background: var(--sidebar-active);
}

/* Type icon chip */
.contentmap-type-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
}

.contentmap-type-chip i {
    width: 12px;
    height: 12px;
}

/* Per-type chip colors */
.contentmap-type-chip.type-h1 { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.contentmap-type-chip.type-h2 { background: rgba(99, 102, 241, 0.08); color: #818cf8; }
.contentmap-type-chip.type-h3 { background: rgba(99, 102, 241, 0.05); color: #a5b4fc; }
.contentmap-type-chip.type-image { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.contentmap-type-chip.type-code { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.contentmap-type-chip.type-table { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.contentmap-type-chip.type-video { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.contentmap-type-chip.type-callout { background: rgba(234, 179, 8, 0.1); color: #ca8a04; }

/* Label text */
.contentmap-item-label {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
}

/* Badge (e.g. language, row count) */
.contentmap-item-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--sidebar-hover);
    color: var(--text-muted);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Indentation for heading hierarchy */
.contentmap-item.indent-h2 { padding-left: 16px; }
.contentmap-item.indent-h3 { padding-left: 26px; }

/* Highlight flash when scrolled to */
@keyframes contentmap-flash {
    0%   { background: var(--accent-glow, rgba(99,102,241,0.15)); }
    100% { background: transparent; }
}
.contentmap-flash {
    animation: contentmap-flash 1.2s ease-out forwards;
}

/* Dark mode fine-tuning */
.dark-mode .contentmap-item-badge {
    background: rgba(255,255,255,0.07);
}
/* ===================================================
   DOG-EAR ANNOTATIONS
   =================================================== */

/* Gutter section wrapper */
.gutter-annotations-section {
    border-top: 1px solid var(--border);
}

.gutter-annotations-section.collapsed .gutter-annotations-toggle {
    transform: rotate(-90deg);
}

.gutter-annotations-section.collapsed .gutter-annotations-list {
    display: none;
}

.gutter-annotations-section.collapsed .annotation-add-btn {
    display: none;
}

.gutter-annotations-toggle {
    transition: transform 0.2s;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Count badge next to title */
.annotations-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    background: var(--primary);
    color: #fff;
    line-height: 1;
}

/* List container */
.gutter-annotations-list {
    padding: 6px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Individual annotation card */
.annotation-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid transparent;
}

.annotation-card:hover {
    background: var(--sidebar-hover);
    border-color: var(--border);
}

/* Color stripe on the left (the "dog-ear" visual) */
.annotation-stripe {
    width: 4px;
    min-height: 32px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 2px;
}

.annotation-stripe.color-yellow { background: #f59e0b; }
.annotation-stripe.color-teal   { background: var(--primary); }
.annotation-stripe.color-red    { background: #ef4444; }
.annotation-stripe.color-blue   { background: #3b82f6; }
.annotation-stripe.color-purple { background: #8b5cf6; }

.annotation-card-body {
    flex: 1;
    min-width: 0;
}

.annotation-card-note {
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.annotation-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.annotation-shared-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(79, 70, 229, 0.12);
    color: var(--primary);
    font-size: 10px;
    font-weight: 600;
}

.annotation-block-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--sidebar-hover);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
}

/* Add button (below list) */
.annotation-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    margin-top: 4px;
    background: none;
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.annotation-add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--accent-glow, rgba(99,102,241,0.05));
}

/* Block-level "dog-ear" trigger button (shown on hover over blocks) */
.block-annotate-btn {
    position: absolute;
    top: 28px;   /* below the drag bar and controls row */
    right: 6px;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 10;
    transition: all 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.block-annotate-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Show on block hover — block-item already has position:relative */
.block-item:hover .block-annotate-btn,
.block-item:focus-within .block-annotate-btn {
    display: flex;
}

/* Annotation dot indicator on annotated blocks */
.annotation-dot {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    pointer-events: none;
    z-index: 5;
}

.annotation-dot.color-yellow { background: #f59e0b; }
.annotation-dot.color-teal   { background: var(--primary); }
.annotation-dot.color-red    { background: #ef4444; }
.annotation-dot.color-blue   { background: #3b82f6; }
.annotation-dot.color-purple { background: #8b5cf6; }

/* Modal color swatches */
.annotation-color-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.annotation-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
    padding: 0;
}

.annotation-color-swatch:hover {
    transform: scale(1.15);
}

.annotation-color-swatch.active {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px var(--main-bg), 0 0 0 4px currentColor;
}

/* Flash highlight when scrolled to from gutter */
@keyframes annotation-flash {
    0%   { outline: 3px solid rgba(245, 158, 11, 0.6); outline-offset: 3px; }
    100% { outline: 3px solid transparent; outline-offset: 3px; }
}
.annotation-flash {
    animation: annotation-flash 1.4s ease-out forwards;
}

/* Dark mode adjustments */
.dark-mode .block-annotate-btn {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* =============================================
   VIDEO COMMENTS — Build 36
   ============================================= */

/* Block-level Record button (mirrors .block-annotate-btn) */
.block-video-btn {
    position: absolute;
    top: 50px;
    right: 6px;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 10;
    transition: all 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.block-video-btn:hover {
    color: #ef4444;
    border-color: #ef4444;
}
.block-item:hover .block-video-btn,
.block-item:focus-within .block-video-btn {
    display: flex;
}
.dark-mode .block-video-btn {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Video dot badge on annotated blocks */
.vc-block-dot {
    position: absolute;
    top: 8px;
    left: 20px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    border: 2px solid var(--card-bg);
}

/* Gutter section wrapper */
.gutter-vc-section {
    border-top: 1px solid var(--border);
}

.gutter-vc-section.collapsed .gutter-vc-toggle {
    transform: rotate(-90deg);
}

.gutter-vc-section.collapsed .gutter-vc-list,
.gutter-vc-section.collapsed #addVideoCommentBtn {
    display: none;
}

.gutter-vc-toggle {
    transition: transform 0.2s;
    color: var(--text-muted);
}

/* List container */
.gutter-vc-list {
    padding: 6px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vc-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 8px;
}

/* Individual video comment card */
.vc-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 0 8px;
    background: var(--card-bg);
    overflow: hidden;
}

.vc-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
}

.vc-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vc-card-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-card-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.vc-card-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.vc-play-btn,
.vc-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.vc-play-btn {
    width: 26px;
    height: 26px;
}

.vc-delete-btn {
    width: 22px;
    height: 22px;
}

.vc-play-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-light, rgba(59,130,246,0.08));
}

.vc-delete-btn:hover {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239,68,68,0.08);
}

.vc-player-wrap {
    padding: 0 8px 8px;
}

.vc-loading {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0;
}

/* Recording modal — viewport */
.vc-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
    margin: 14px 0 0;
}

.vc-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* REC indicator overlay */
.vc-rec-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.vc-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: vc-blink 1s step-start infinite;
}

@keyframes vc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Uploading message */
.vc-uploading-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 10px;
}

/* Spin animation for upload icon */
.vc-spin {
    animation: vc-spin 1s linear infinite;
    flex-shrink: 0;
}

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

}

/* =============================================
   E2E ENCRYPTION — Build 37
   ============================================= */

/* Warning box in enable modal */
.e2e-warning-box {
    background: #fff7ed;
    border: 1px solid #f97316;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #7c2d12;
    margin-bottom: 16px;
}
.dark-mode .e2e-warning-box {
    background: #2d1a0a;
    border-color: #c2410c;
    color: #fed7aa;
}

/* Progress bar */
.e2e-progress-track {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
}
.e2e-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: 99px;
    transition: width 0.2s ease;
}

/* Status badges in team modal */
.e2e-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.e2e-status-on {
    background: #dcfce7;
    color: #166534;
}
.e2e-status-off {
    background: var(--hover-bg);
    color: var(--text-muted);
}
.dark-mode .e2e-status-on {
    background: #14532d;
    color: #86efac;
}

/* Danger button */
.btn-danger {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-danger:hover { background: #dc2626; }