/* Engram custom styles */

/* Fix 15px margin-left caused by scrollbar-gutter */
html {
    margin-left: 0 !important;
}

/* Hide GridStack resize handles visually (keep functionality) */
.ui-resizable-handle {
    opacity: 0 !important;
    background: none !important;
}

/* Remove left border from horizontal steps (Tabler default is for vertical) */
.steps.steps-counter {
    border-left: none;
}

/* Hide original select when Tom Select is active (fix for missing CSS rule) */
/* AI-CONTEXT: See docs/pitfalls.md#frontend-hidden-original-element */
select.tomselected,
select#vendor-select {
    display: none !important;
}

/* Card hover effect - box-shadow only (no transform to avoid stacking context issues) */
/* AI-CONTEXT: See docs/pitfalls.md#frontend-z-index-stacking-context */
.card.card-link {
    transition: box-shadow 0.15s ease;
}
.card.card-link:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* When dropdown is open, lift the entire card above other cards */
.row-cards .col-12:has(.dropdown-menu.show) {
    position: relative;
    z-index: 2;
}

/* Navbar dropdown on hover (desktop only, mobile keeps click) */
@media (min-width: 768px) {
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        top: 100%;
        margin-top: 0;
    }
    .navbar .nav-item.dropdown:hover > .dropdown-menu-end {
        right: 0;
        left: auto;
    }
}

/* Ensure navbar dropdowns are above page content (cards, etc.) */
.navbar .dropdown-menu {
    z-index: 1030;
}

/* ==========================================================================
   HTMX Loading Indicators
   AI-CONTEXT: See docs/features/realtime-performance.md
   ========================================================================== */

/* Progress bar at top of page during HTMX requests */
.htmx-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--tblr-primary);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show when HTMX request is in progress */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Animated progress effect */
.htmx-request .htmx-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: htmx-loading 1s ease-in-out infinite;
}

@keyframes htmx-loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* Reduce opacity of page content during loading (subtle feedback) */
body.htmx-request .page-body {
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

/* ==========================================================================
   View Transitions API
   AI-CONTEXT: See docs/features/realtime-performance.md
   Graceful degradation: browsers without support just skip these rules
   ========================================================================== */

/* Default cross-fade transition for page content */
@view-transition {
    navigation: auto;
}

/* Smooth fade animation */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.15s;
    animation-timing-function: ease-in-out;
}

/* Keep navbar stable during transitions */
/* Note: view-transition-name creates a stacking context, so we need z-index */
.navbar {
    view-transition-name: navbar;
    position: relative;
    z-index: 1030;
}

::view-transition-old(navbar),
::view-transition-new(navbar) {
    animation: none;
}

/* ==========================================================================
   Notion Sync Page
   AI-CONTEXT: Styles must be in global CSS to survive hx-boost navigation
   See docs/pitfalls.md#frontend-css-load-order
   ========================================================================== */

/* Toast container - fixed position for notifications */
.toast-container-fixed {
    position: fixed;
    top: 0;
    right: 0;
    padding: 1rem;
    z-index: 1050;
}

/* Wizard panel visibility */
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

/* Wizard list container - scrollable list with max height */
.wizard-list-container {
    max-height: 300px;
}

/* Badge spinner - smaller size for inline badge spinners */
.badge-spinner {
    width: 0.7em;
    height: 0.7em;
}

/* Direction choice cards */
.direction-card {
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.direction-card:hover {
    border-color: var(--tblr-primary);
}
.direction-card.selected {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
}

/* Selectable list items */
.list-group-item-action.selected {
    background-color: var(--tblr-primary-bg-subtle);
    border-color: var(--tblr-primary);
}

/* ==========================================================================
   Activity Attendee Avatars
   Uses Tabler's native avatar-list-stacked styling with gravatar overlay
   ========================================================================== */

/* Gravatar img overlays initials, removed via onerror if 404 */
.avatar-list-stacked .avatar {
    position: relative;
}
.avatar-list-stacked .avatar > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

/* Border overlay - visible over gravatar images */
.avatar-list-stacked .avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    pointer-events: none;
}

/* Subtle hover lift */
.avatar-list-stacked .avatar:hover {
    transform: translateY(-2px);
}

/* Fix last avatar overflow: Tabler uses negative margin-right on all avatars,
   which causes the last one to visually extend beyond its container */
.avatar-list-stacked .avatar:last-child {
    margin-right: 0 !important;
}

/* Attendee popover (reuses alpine-popover styling from person_detail_page) */
#attendee-popover {
    position: fixed;
    z-index: 1070;
    padding: 0.5rem 0;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown);
    min-width: 150px;
    max-width: 250px;
    animation: fadeIn 0.15s ease-in;
}

#attendee-popover .attendee-popover-item {
    display: block;
    padding: 0.35rem 0.75rem;
    color: var(--tblr-body-color);
    text-decoration: none;
    font-size: 0.875rem;
}

#attendee-popover .attendee-popover-item:hover {
    background: var(--tblr-bg-surface-secondary);
}

/* ==========================================================================
   Dashboard Schedule Timeline
   Elegant timeline view for today's meetings
   ========================================================================== */

/* Date badge in header */
.schedule-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--tblr-primary);
    color: white;
    border-radius: var(--tblr-border-radius);
}
.schedule-day {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}
.schedule-month {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

/* Timeline container */
.schedule-timeline {
    position: relative;
    padding-left: 70px;
}

/* Timeline item */
.schedule-item {
    position: relative;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--tblr-border-color);
}
.schedule-item-last {
    border-left-color: transparent;
    padding-bottom: 0;
}

/* Timeline dot */
.schedule-dot {
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    background: var(--tblr-primary);
    border-radius: 50%;
    border: 2px solid var(--tblr-bg-surface);
}

/* Time column */
.schedule-time {
    position: absolute;
    left: -70px;
    top: -2px;
    width: 55px;
    text-align: right;
}
.schedule-time-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    font-variant-numeric: tabular-nums;
}
.schedule-time-end {
    display: block;
    font-size: 0.7rem;
    color: var(--tblr-secondary);
    font-variant-numeric: tabular-nums;
}

/* Content */
.schedule-content {
    min-height: 32px;
}
.schedule-title {
    font-weight: 500;
    color: var(--tblr-body-color);
    line-height: 1.4;
}
.schedule-participants {
    margin-top: 0.25rem;
}

/* Notion unlink popout - appears on hover above the Notion button */
/* AI-CONTEXT: Matches .icon-picker-popup styling from person_detail_page.html */
.notion-unlink-popout {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 2px; /* Small overlap zone for hover continuity */
    z-index: 100;
}
.notion-unlink-popout-inner {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.25rem;
    padding: 0.15rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.notion-linked-wrapper:hover .notion-unlink-popout {
    display: block;
}
/* Unlink button styling - same size as btn-sm btn-icon (24px) */
.notion-unlink-popout .notion-unlink-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 0.2rem;
    color: var(--tblr-danger);
}
.notion-unlink-popout .notion-unlink-btn:hover {
    background: var(--tblr-danger-lt);
}
/* Remove underline from Notion link on hover */
.notion-linked-wrapper a:hover {
    text-decoration: none !important;
}

/* =========================================================================
   Notion Link Modal - List Items
   ========================================================================= */
.notion-pages-container {
    max-height: 320px;
    overflow-y: auto;
}
.notion-page-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--tblr-border-color);
    transition: background-color 0.15s ease;
}
.notion-page-item:last-child {
    border-bottom: none;
}
.notion-page-item:hover {
    background-color: var(--tblr-bg-surface-secondary);
    text-decoration: none;
}
.notion-page-item:active {
    background-color: var(--tblr-primary-lt);
}
.notion-page-title {
    font-weight: 500;
    color: var(--tblr-body-color);
    line-height: 1.3;
}
.notion-page-time {
    font-size: 0.8125rem;
    color: var(--tblr-secondary);
    margin-left: 1rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Person Detail Page
   AI-CONTEXT: Styles for person_detail_page.html
   Moved from inline <style> block for better maintainability
   ========================================================================== */

/* Custom color palette for person detail page */
.person-detail-page {
    --v2-bg: #fafafa;
    --v2-border: #e8e8e8;
    --v2-text-muted: #8c8c8c;
}

/* Person header: generous spacing, bottom border */
.person-header {
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--v2-border, #e8e8e8);
}

/* Activity header: proper spacing and wrapping */
.col-lg-8 > .d-flex.flex-wrap {
    row-gap: 0.5rem;
    column-gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Activity Filter Buttons
   -------------------------------------------------------------------------- */
.activity-filter-btn {
    background-color: transparent;
    border: 1px solid var(--v2-border, #e8e8e8);
    color: var(--v2-text-muted, #8c8c8c);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.activity-filter-btn .icon {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.activity-filter-btn:hover {
    background-color: var(--tblr-bg-surface-secondary);
    border-color: var(--v2-border, #e8e8e8);
    color: var(--tblr-body-color);
}

.activity-filter-btn.active {
    border-color: transparent;
    color: var(--tblr-body-color);
}

.activity-filter-btn.bg-yellow-lt,
.activity-filter-btn.bg-azure-lt,
.activity-filter-btn.bg-red-lt,
.activity-filter-btn.bg-green-lt,
.activity-filter-btn.bg-purple-lt {
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   Alternative Tab Styling (nav-tabs-alt)
   -------------------------------------------------------------------------- */
.nav-tabs-alt {
    border-bottom: 1px solid var(--v2-border, #e8e8e8);
    gap: 0;
}

.nav-tabs-alt .nav-link {
    border: none;
    border-radius: 0;
    padding: 0.5rem 0;
    margin-right: 1.5rem;
    color: var(--v2-text-muted, #8c8c8c);
    border-bottom: 2px solid transparent;
    background: transparent;
}

.nav-tabs-alt .nav-link:hover {
    color: var(--tblr-body-color);
    border-bottom-color: var(--v2-border, #e8e8e8);
}

.nav-tabs-alt .nav-link.active {
    color: var(--tblr-body-color);
    border-bottom-color: var(--tblr-primary);
    background: transparent;
}

/* --------------------------------------------------------------------------
   Detail Sections
   -------------------------------------------------------------------------- */
.detail-section {
    margin-bottom: 0;
}

.detail-section-header {
    margin-bottom: 0.5rem;
    min-height: 28px; /* Prevent collapse when add button hidden */
}

.detail-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v2-text-muted, #8c8c8c);
    font-weight: 600;
}

.detail-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--v2-border, #e8e8e8);
    position: relative;
    z-index: 1;
}

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

/* Match placeholder height to add-form height for zero shift */
.detail-item.placeholder-form-height {
    min-height: 48px;
    display: flex;
    align-items: center;
}

.detail-item.popover-open,
.editable-row.popover-open,
.address-row.popover-open {
    z-index: 100;
}

/* --------------------------------------------------------------------------
   Hover-Show Patterns
   -------------------------------------------------------------------------- */
.section-add-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.detail-section:hover .section-add-btn {
    opacity: 1;
}

.row-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
    position: relative;
    z-index: 2;
    min-width: 48px;  /* AI-CONTEXT: Reserve space to prevent layout shift on edit */
}

/* --------------------------------------------------------------------------
   Editable Fields Layout Stability
   AI-CONTEXT: See docs/features/editable-fields-layout-stability.md

   ALL inline edit inputs share these properties for zero layout shift:
   - Same min-height and line-height as display elements
   - Transparent border/background
   - No padding changes between states
   -------------------------------------------------------------------------- */

/* Base dimensions for display elements */
.editable-value {
    display: inline-block;
    min-height: 1.5em;
    line-height: 1.5;
    vertical-align: middle;
}

/* Unified transparent input styling */
.editable-input,
.inline-add-input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    line-height: 1.5;
    min-height: 1.5em;
}

/* Remove detail-item border when it only contains an add-input */
.detail-item:has(> .inline-add-input:only-child) {
    border-bottom: none;
}

.editable-input {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.editable-input:focus,
.inline-add-input:focus {
    outline: none;
    box-shadow: none;
}

.editable-row:hover .row-actions,
.detail-item:hover .row-actions,
.weetje-item:hover .row-actions,
.address-row:hover .row-actions,
.popover-open .row-actions {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Activity Cards
   -------------------------------------------------------------------------- */
.activity-card {
    transition: box-shadow 0.15s ease;
}

.activity-card:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.activity-actions {
    opacity: 1;
}

.activity-action-btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-action-btn .icon {
    width: 1rem;
    height: 1rem;
}

/* --------------------------------------------------------------------------
   Details/Summary Collapse
   -------------------------------------------------------------------------- */
details.detail-section > summary {
    list-style: none;
}

details.detail-section > summary::marker,
details.detail-section > summary::-webkit-details-marker {
    display: none;
}

details.detail-section > summary .detail-section-title::after {
    content: ' +';
}

details.detail-section[open] > summary .detail-section-title::after {
    content: ' -';
}

/* --------------------------------------------------------------------------
   Inline Edit Fields
   -------------------------------------------------------------------------- */
.inline-edit {
    padding: 0;
    border: none;
    background: transparent;
    font-size: inherit;
    line-height: inherit;
    height: auto;
    min-height: 0;
    box-shadow: none;
    outline: none;
}

.inline-edit:focus {
    box-shadow: none;
    border: none;
    outline: none;
}

.form-control.inline-edit {
    padding: 0;
    border: none;
    background: transparent;
    font-size: inherit;
    line-height: inherit;
    height: auto;
    min-height: 0;
}

.form-control.inline-edit:focus {
    box-shadow: none;
    border: none;
    outline: none;
}

/* Invisible input fields that blend with text (legacy class name) */
.form-control.border-0 {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: inherit !important;
    line-height: inherit !important;
    height: auto !important;
    min-height: 0 !important;
}

.form-control.border-0:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* --------------------------------------------------------------------------
   Icon Links
   -------------------------------------------------------------------------- */
.link-icon {
    color: var(--tblr-primary);
    text-decoration: none;
}

.link-icon:hover {
    color: var(--tblr-primary);
    text-decoration: none;
}

.delete-icon {
    color: var(--tblr-danger);
    text-decoration: none;
}

.delete-icon:hover {
    color: var(--tblr-danger);
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Alpine Popover
   -------------------------------------------------------------------------- */
.alpine-popover {
    position: absolute;
    right: -18px;
    top: 100%;
    margin-top: 8px;
    z-index: 1070;
    padding: 0.5rem 0.75rem;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown);
    min-width: 120px;
    animation: alpine-popover-fadeIn 0.15s ease-in;
}

.alpine-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--tblr-border-color);
}

.alpine-popover::after {
    content: '';
    position: absolute;
    top: -5px;
    right: 21px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--tblr-bg-surface);
}

.alpine-popover-title {
    font-weight: 600;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--tblr-border-color);
}

@keyframes alpine-popover-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Popover variant that appears above (for elements near bottom of viewport) */
.alpine-popover-above {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    z-index: 1070;
    padding: 0.5rem 0.75rem;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown);
    min-width: 120px;
    animation: alpine-popover-above-fadeIn 0.15s ease-in;
}

.alpine-popover-above::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--tblr-border-color);
}

.alpine-popover-above::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--tblr-bg-surface);
}

@keyframes alpine-popover-above-fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* CSS Tooltip - shows [data-tooltip] content on hover (no JS needed)
   Uses ::before to avoid conflicts with elements that use ::after (like .avatar) */
[data-tooltip] {
    position: relative;
    overflow: visible !important; /* Ensure tooltip isn't clipped */
}

/* Override Tabler's avatar overflow:hidden for tooltips */
.avatar[data-tooltip],
.avatar-list-stacked .avatar[data-tooltip] {
    overflow: visible !important;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    padding: 4px 8px;
    background: var(--tblr-dark);
    color: var(--tblr-light);
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
    border-radius: var(--tblr-border-radius);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1080;
    pointer-events: none;
}

[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   LinkedIn Row
   -------------------------------------------------------------------------- */
.linkedin-row .link-icon {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.linkedin-row:hover .link-icon {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Inline Add Input - Additional rules
   AI-CONTEXT: Base styles in "Editable Fields Layout Stability" section above
   -------------------------------------------------------------------------- */
.inline-add-input {
    width: 100%;
}

textarea.inline-add-input {
    resize: none;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Inline Date Input/Display
   AI-CONTEXT: Both classes must have IDENTICAL dimensions for zero layout shift
   -------------------------------------------------------------------------- */
.inline-date-input,
.inline-date-display {
    display: inline-block;
    border: 1px solid transparent;
    background: transparent;
    padding: 0.25rem 0.5rem;
    font-size: inherit;
    color: inherit;
    border-radius: 0.25rem;
    min-width: 140px;
    line-height: 1.5;
    min-height: calc(1.5em + 0.5rem + 2px); /* line-height + padding + border */
    box-sizing: border-box;
}

.inline-date-input {
    cursor: text;
}

.inline-date-input:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Autocomplete Dropdown
   AI-CONTEXT: Used by Tags, Relations autocomplete dropdowns
   -------------------------------------------------------------------------- */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown);
}

.autocomplete-dropdown-item {
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.autocomplete-dropdown-item:hover,
.autocomplete-dropdown-item.highlighted {
    background: var(--tblr-bg-surface-secondary);
}

/* --------------------------------------------------------------------------
   Inline Select
   -------------------------------------------------------------------------- */
.inline-select {
    border: 1px solid transparent;
    background: transparent;
    padding: 0.125rem 0.25rem;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 0.25rem;
}

.inline-select:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Icon Picker
   -------------------------------------------------------------------------- */
.icon-picker {
    position: relative;
    z-index: 1000;  /* High enough to be above siblings when popup is shown */
    display: inline-flex;
    align-items: center;
    width: 18px;
    height: 18px;
}

.icon-picker-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;  /* High enough to be above flex siblings */
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.25rem;
    padding: 0.25rem;
    display: flex;
    gap: 0.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin-top: 0.25rem;
}

.icon-picker-option {
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
    color: var(--tblr-muted);
}

.icon-picker-option:hover {
    background: var(--tblr-bg-surface-secondary);
}

.icon-picker-option.active {
    background: var(--tblr-primary-lt);
}

/* ==========================================================================
   Dashboard Todo Widget
   AI-CONTEXT: Moved from inline CSS in dashboard.html
   ========================================================================== */

.todo-item .inline-add-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--tblr-border-color);
    background: transparent;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    min-height: 1.5em;
}

.todo-item .inline-add-input:focus {
    outline: none;
    border-bottom-color: var(--tblr-primary);
}

.todo-item .row-actions {
    opacity: 0;
    transition: opacity 0.15s;
}

.todo-item:hover .row-actions {
    opacity: 1;
}

.todo-item .delete-icon {
    color: var(--tblr-muted);
}

.todo-item .delete-icon:hover {
    color: var(--tblr-danger);
}

/* Todo collapse toggle - chevron rotation (on icon, not button) */
.todo-collapse-toggle .icon {
    transition: transform 0.2s ease;
}

.todo-collapse-toggle.collapsed .icon {
    transform: rotate(-90deg);
}

/* ==========================================================================
   Chat Sidebar
   AI-CONTEXT: Moved from inline CSS in chat_sidebar.html
   ========================================================================== */

/* Chat sidebar sticky positioning */
.chat-sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
}

/* Typing indicator animation */
.animated-dots::after {
    content: '';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* Spin animation for loader */
.icon-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Utility Classes
   AI-CONTEXT: Replacements for repeated inline style="" patterns
   ========================================================================== */

/* Behavioral utilities */
.cursor-pointer {
    cursor: pointer;
}

/* Autogrow textarea - removes resize handle and hides overflow */
.form-control-autogrow {
    resize: none;
    overflow: hidden;
}

/* Whitespace utilities */
.whitespace-pre-line,
.ws-preline {
    white-space: pre-line;
}

/* Activity action button colors - replaces inline style="background: var(...)" */
.btn-action-obsidian {
    background: var(--tblr-purple-lt);
    color: var(--tblr-purple);
}
.btn-action-gmail {
    background: var(--tblr-red-lt);
    color: var(--tblr-red);
}
.btn-action-source {
    background: var(--tblr-green-lt);
    color: var(--tblr-green);
}
.btn-action-notion {
    background: var(--tblr-dark-lt);
    color: var(--tblr-dark);
}

/* ==========================================================================
   People Page - Sticky Elements
   AI-CONTEXT: Replacements for inline styles in people.html
   ========================================================================== */

/* Sticky filter sidebar */
.people-filters.sticky-top {
    top: 1rem;
}

/* Sticky search card - Tabler card pattern for sticky elements */
.people-search-card.sticky-top {
    top: 0;
    z-index: 100;
}

/* Clear button in search input */
.search-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    padding: 4px;
}