/* Modern, colorful editor buttons */
:root {
    --bg: #dcdcdc; /* body background */
    --container-bg: #ffffff;
    --container-wallpaper: none; /* set to url(...) when wallpaper applied */
    --text-color: #222;
    --muted-text: #888;
    --icon-color: #555;
    --popup-overlay: rgba(0,0,0,0.7);
    --popup-bg: #fff;
    --note-text-color: #444;
    --note-title-color: #b48a00;
    --editor-bg: #ffffff;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --fav-color: red;
    --star-color: gold;
    --lock-color: #7b5cff;
    --collapse-color: #6f42c1;
    --theme-icon-dark: #ffd166;
    --search-bg: #ffffff;
    --search-text: var(--text-color);
}

/* Lucide Icon Sizing (SVG-based icons) */
svg.lucide {
    width: 18px;
    height: 18px;
}

/* Header icons - slightly larger */
.header-icon svg.lucide,
.header-actions svg.lucide {
    width: 20px;
    height: 20px;
}

/* Search icon */
.search-icon svg.lucide {
    width: 18px;
    height: 18px;
}

/* Filter chip icons */
.filter-chips svg.lucide {
    width: 16px;
    height: 16px;
}

/* Note action icons */
.note-actions svg.lucide {
    width: 18px;
    height: 18px;
}

/* Expand button icon */
.expand-btn svg.lucide {
    width: 15px;
    height: 15px;
}

/* Wallpaper action chips (compact, light/dark aware) */
.wallpaper-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    background-color: var(--container-bg);
    color: var(--text-color);
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    cursor: pointer;
}
.wallpaper-chip:focus { outline: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.wallpaper-chip.apply { color: var(--success-color); border-color: rgba(40,167,69,0.12); background-color: rgba(40,167,69,0.03); }
.wallpaper-chip.remove { color: var(--danger-color); border-color: rgba(220,53,69,0.12); background-color: rgba(220,53,69,0.03); }
.dark-mode .wallpaper-chip { border-color: rgba(255,255,255,0.06); background-color: rgba(255,255,255,0.01); }
.dark-mode .wallpaper-chip.apply { background-color: rgba(40,167,69,0.06); }
.dark-mode .wallpaper-chip.remove { background-color: rgba(220,53,69,0.06); }

/* Small chips used for PIN actions */
.chip-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 13px;
    background: var(--container-bg);
    color: var(--text-color);
    border: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
}
.chip-small.danger { color: var(--danger-color); border-color: rgba(220,53,69,0.12); background-color: rgba(220,53,69,0.02); }
.chip-small:focus { outline: none; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dark-mode .chip-small { border-color: rgba(255,255,255,0.06); background-color: rgba(255,255,255,0.01); color: var(--text-color); }
.dark-mode .chip-small.danger { background-color: rgba(220,53,69,0.06); }

/* Change PIN chip: orange half-circle symbol, subtle orange background */
.chip-small.change {
    color: #ff9a2e; /* orange */
    border-color: rgba(255,154,46,0.12);
    background-color: rgba(255,154,46,0.03);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    padding: 4px;
    border-radius: 16px;
    font-size: 16px;
}
.chip-small.change:hover { box-shadow: 0 4px 12px rgba(255,154,46,0.08); }
.dark-mode .chip-small.change { background-color: rgba(255,154,46,0.06); }

/* Make danger chip match wallpaper remove chip appearance (size, bg, border) */
.chip-small.danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    padding: 4px;
    border-radius: 16px;
    color: var(--danger-color);
    border-color: rgba(220,53,69,0.12);
    background-color: rgba(220,53,69,0.03);
    font-size: 16px;
    font-weight: 700;
}
.chip-small.danger:hover { box-shadow: 0 4px 12px rgba(220,53,69,0.08); }
.dark-mode .chip-small.danger { background-color: rgba(220,53,69,0.06); }

/* Dim disabled wallpaper chips */
.wallpaper-chip[disabled] {
    opacity: 0.28;
    pointer-events: none;
    filter: grayscale(60%) brightness(0.8);
}

/* Visually indicate disabled inputs and action chips across Settings */
button[disabled], .chip-small[disabled] {
    opacity: 0.32;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(60%) brightness(0.75);
}

input:disabled, textarea:disabled, select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(30%) brightness(0.85);
}

/* Make disabled file selector button look disabled too */
#wallpaperFileInput:disabled::-webkit-file-upload-button,
#wallpaperFileInput:disabled::file-selector-button,
#fileInput:disabled::file-selector-button {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(60%) brightness(0.7);
}

/* When PIN controls are present but enforcement disabled, dim the whole row */
.pin-inputs-row.controls-disabled .pin-digit,
.pin-inputs-row.controls-disabled .chip-small,
.pin-inputs-row.controls-disabled .wallpaper-chip {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(60%) brightness(0.75);
}

/* Dark-mode specific stronger dimming to ensure clear disabled state */
.dark-mode .wallpaper-chip[disabled],
.dark-mode button[disabled],
.dark-mode .chip-small[disabled],
.dark-mode input:disabled,
.dark-mode textarea:disabled,
.dark-mode select:disabled,
.dark-mode .pin-inputs-row.controls-disabled .pin-digit {
    opacity: 0.28;
    filter: grayscale(70%) brightness(0.7);
}

/* Settings separator: darker thin line with subtle drop shadow for depth */
#settingsPopup .popup-content hr {
    border: none;
    /* Black line for maximum contrast */
    border-top: 2px solid #000000;
    margin: 12px 0;
    /* Heavier shadow for depth */
    box-shadow: 0 8px 28px rgba(0,0,0,0.65);
    height: 0;
}

/* Dark mode variant for the separator (stronger contrast) */
.dark-mode #settingsPopup .popup-content hr {
    border-top: 2px solid #000000;
    box-shadow: 0 8px 28px rgba(0,0,0,0.75);
}

/* Settings popup links - match bulb color (amber/yellow) with no underline */
#settingsPopup a {
    color: #ffd166;
    text-decoration: none;
}

#settingsPopup a:hover {
    color: #ffb347;
    text-decoration: none;
}

.dark-mode #settingsPopup a {
    color: #ffd166;
    text-decoration: none;
}

.dark-mode #settingsPopup a:hover {
    color: #ffb347;
    text-decoration: none;
}

.dark-mode {
    --bg: #000000;
    --container-bg: #171717;
    --text-color: #e6e6e6;
    --muted-text: #9a9a9a;
    --icon-color: #555;
    --popup-overlay: rgba(0,0,0,0.9);
    --popup-bg: #1a1a1a;
    --note-text-color: #e6e6e6;
    --note-title-color: #f0c36d;
    --editor-bg: #222222;
    --success-color: #2ecc71;
    --danger-color: #e74c3c;
    --fav-color: #ff6b6b;
    --star-color: #ffd54f;
    --theme-icon-dark: #ffd166;
    --search-bg: #222222;
    --search-text: var(--text-color);
}

/* Make the empty-state welcome text more visible in dark mode */
.dark-mode .empty-state {
    color: var(--text-color) !important;
}

/* Empty-state illustration */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.empty-art svg { display:block; max-width:220px; height:auto; }
.empty-text { max-width: 680px; margin: 0 auto; text-align:center; color: var(--muted-text); }

/* ── Loading / syncing indicator (inside the container) ──────────────── */
.sync-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
}
.sync-indicator-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

/* ── Indeterminate progress bar ────────────────────────────────────── */
.syncing-progress-track {
    width: 100%;
    max-width: 260px;
    height: 3px;
    background: var(--border-color, rgba(0,0,0,0.1));
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.syncing-progress-bar {
    width: 40%;
    height: 100%;
    background: var(--btn-gradient-start, #f472b6);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: -40%;
    animation: syncSlide 1.4s ease-in-out infinite;
}
@keyframes syncSlide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Theme-aware variables for the SVG (fallbacks provided) */
:root {
    --empty-card-bg: rgba(255,255,255,0.06);
    --empty-card-stroke: rgba(0,0,0,0.08);
    --empty-line: rgba(0,0,0,0.12);
    --btn-gradient-start: #f472b6;
    --btn-gradient-end: #f472b6;
    --btn-gradient: #f472b6;
    --btn-fg: #000;
}

.dark-mode {
    --empty-card-bg: rgba(255,255,255,0.03);
    --empty-card-stroke: rgba(255,255,255,0.06);
    --empty-line: rgba(255,255,255,0.12);
}

/* Pulse animation for small circle */
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.9; }
    70% { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}
.empty-art .pulse { animation: pulse-ring 1.6s ease-out infinite; }

/* ── Editor action buttons ────────────────────────────────── */
.editor-btn {
    display: inline-flex;
    height: 32px;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    font-weight: 400;
    font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    user-select: none;
    padding: 6px 14px;
    font-size: 0.750rem;
    line-height: 1.5;
    border-radius: 4px;
    border: 1px solid transparent;
    background-image: none;
    transition: all 0.15s ease-in-out;
    width: auto;
    text-decoration: none;
    letter-spacing: 0;
    box-shadow: none;
}

/* Add Note / Save: filled with theme color */
.editor-btn#actionButton {
    background: var(--btn-gradient, #f472b6);
    color: var(--btn-fg, #fff);
    border-color: transparent;
}
.editor-btn#actionButton:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

/* Clear: white background */
.editor-btn.clear-btn {
    background: #ffffff;
    color: #444;
    border-color: rgba(0,0,0,0.18);
}
.editor-btn.clear-btn:hover {
    background: #f3f3f3;
    border-color: rgba(0,0,0,0.28);
}

/* Cancel: light red */
.editor-btn#cancelButton {
    background: #fff0f0;
    color: #c0392b;
    border-color: rgba(192,57,43,0.25);
}
.editor-btn#cancelButton:hover {
    background: #ffe2e2;
    border-color: rgba(192,57,43,0.45);
}

/* Dark-mode: Clear */
.dark-mode .editor-btn.clear-btn {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.82);
    border-color: rgba(255,255,255,0.14);
}
.dark-mode .editor-btn.clear-btn:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.28);
}

/* Dark-mode: Cancel */
.dark-mode .editor-btn#cancelButton {
    background: rgba(220,53,69,0.15);
    color: #ff8080;
    border-color: rgba(220,53,69,0.30);
}
.dark-mode .editor-btn#cancelButton:hover {
    background: rgba(220,53,69,0.25);
    border-color: rgba(220,53,69,0.50);
}

/* Popup: Sync Data button (same style as Add Note) */
.editor-btn.popup-sync-btn {
    gap: 6px;
    background: var(--btn-gradient, #f472b6);
    color: var(--btn-fg, #fff);
    border-color: transparent;
}
.editor-btn.popup-sync-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.editor-btn.popup-sync-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}
.editor-btn.popup-sync-btn:disabled,
.editor-btn.popup-sync-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* Popup: Sign Out button (same style as Cancel) */
.editor-btn.popup-cancel-btn {
    gap: 6px;
    background: #fff0f0;
    color: #c0392b;
    border-color: rgba(192,57,43,0.25);
}
.editor-btn.popup-cancel-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.editor-btn.popup-cancel-btn:hover {
    background: #ffe2e2;
    border-color: rgba(192,57,43,0.45);
}
.dark-mode .editor-btn.popup-cancel-btn {
    background: rgba(220,53,69,0.15);
    color: #ff8080;
    border-color: rgba(220,53,69,0.30);
}
.dark-mode .editor-btn.popup-cancel-btn:hover {
    background: rgba(220,53,69,0.25);
    border-color: rgba(220,53,69,0.50);
}

/* Editor buttons wrapper */
.editor-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 5px;
}
/* Sticky Notes Layout */
#stickyNotesContainer {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 10px;
}

/* Tighter spacing when collapsed list mode is active */
#stickyNotesContainer.collapsed-list-mode {
    gap: 6px;
}

/* (No tiles-view layout added — settings checkbox mirrors existing List/Tiles filter only) */

.sticky-note {
    background: #fffbe7;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1.5px 0 #e2c275;
    border-radius: 10px;
    padding: 18px 18px 16px 18px;
    min-height: 100px;
    box-sizing: border-box;
    overflow-wrap: break-word;
    position: relative;
    transition: box-shadow 0.2s, transform 0.15s;
    margin: 0;
    width: 100%;
    word-break: break-word;
    cursor: pointer; /* indicate note is clickable */
    will-change: box-shadow, transform;
}

/* Special 3-column layout when container is set to 850px */
.container.container-size-850 #stickyNotesContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* When in 'List' (collapsed) mode at 850px, show compact rectangular cards (title only) in 3 columns */
.container.container-size-850 #stickyNotesContainer.collapsed-list-mode .sticky-note,
.container.container-size-850 #stickyNotesContainer .sticky-note.collapse-list-view {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    min-height: 56px;
}

/* Ensure content/actions/timestamp hidden for collapsed notes (title-only) */
.container.container-size-850 #stickyNotesContainer .sticky-note.collapse-list-view .note-content,
.container.container-size-850 #stickyNotesContainer .sticky-note.collapse-list-view .note-actions,
.container.container-size-850 #stickyNotesContainer .sticky-note.collapse-list-view .timestamp,
.container.container-size-850 #stickyNotesContainer .sticky-note.collapse-list-view .note-attachment-row {
    display: none !important;
}

/* Tiles view at 850px: square tiles, show title + truncated body */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* When in 'List' (collapsed) mode at 950px, show compact rectangular cards (title only) in 5 columns */
.container.container-size-950 #stickyNotesContainer.collapsed-list-mode .sticky-note,
.container.container-size-950 #stickyNotesContainer .sticky-note.collapse-list-view {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    min-height: 56px;
}

/* Ensure the container itself becomes a 5-column grid in collapsed-list mode */
.container.container-size-950 #stickyNotesContainer.collapsed-list-mode {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

/* Hide content/actions/timestamp for sticky-notes when the container is in collapsed-list-mode */
.container.container-size-950 #stickyNotesContainer.collapsed-list-mode .sticky-note .note-content,
.container.container-size-950 #stickyNotesContainer.collapsed-list-mode .sticky-note .note-actions,
.container.container-size-950 #stickyNotesContainer.collapsed-list-mode .sticky-note .timestamp,
.container.container-size-950 #stickyNotesContainer.collapsed-list-mode .sticky-note .note-attachment-row {
    display: none !important;
}

/* Ensure content/actions/timestamp hidden for collapsed notes (title-only) at 950px */
.container.container-size-950 #stickyNotesContainer .sticky-note.collapse-list-view .note-content,
.container.container-size-950 #stickyNotesContainer .sticky-note.collapse-list-view .note-actions,
.container.container-size-950 #stickyNotesContainer .sticky-note.collapse-list-view .timestamp,
.container.container-size-950 #stickyNotesContainer .sticky-note.collapse-list-view .note-attachment-row {
    display: none !important;
}

/* Tiles view at 950px: square tiles, show title + truncated body (5-per-row) */
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

/* Ensure the welcome/empty state spans the full width in grid layouts and is centered */
.container.container-size-750 #stickyNotesContainer .empty-state,
.container.container-size-850 #stickyNotesContainer .empty-state,
.container.container-size-950 #stickyNotesContainer .empty-state {
    grid-column: 1 / -1; /* span all columns */
    justify-self: center;
    width: 100%;
    text-align: center;
}

/* Container layout at 750px: use a 2-column grid for both tiles and collapsed-list */
.container.container-size-750 #stickyNotesContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* When in 'List' (collapsed) mode at 750px, show compact rectangular cards (title only) in 2 columns */
.container.container-size-750 #stickyNotesContainer.collapsed-list-mode .sticky-note,
.container.container-size-750 #stickyNotesContainer .sticky-note.collapse-list-view {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    min-height: 56px;
}

/* Ensure content/actions/timestamp hidden for collapsed notes (title-only) at 750px */
.container.container-size-750 #stickyNotesContainer .sticky-note.collapse-list-view .note-content,
.container.container-size-750 #stickyNotesContainer .sticky-note.collapse-list-view .note-actions,
.container.container-size-750 #stickyNotesContainer .sticky-note.collapse-list-view .timestamp,
.container.container-size-750 #stickyNotesContainer .sticky-note.collapse-list-view .note-attachment-row {
    display: none !important;
}
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    /* reduce top padding to give the title more room at the top
       while maintaining side/bottom padding for the tile layout */
    padding: 8px 12px 12px 12px;
    min-height: 0; /* let aspect-ratio control height */
    overflow: hidden;
}
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    /* mirror 850px tile padding but keep square tiles for 5-up grid */
    padding: 8px 12px 12px 12px;
    min-height: 0;
    overflow: hidden;
}
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note {
    /* Reduce vertical height for 750px tiles: keep two columns but make tiles shorter
       by using a wider aspect ratio (width / height = 2), which yields approximately
       half the height of the previous square tiles. */
    aspect-ratio: 2 / 1;
    display: flex;
    flex-direction: column;
    /* mirror 850px tile padding but slightly tighter for 2-column layout */
    padding: 8px 12px 12px 12px;
    min-height: 0;
    overflow: hidden;
}
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-title {
    /* increase gap to body while removing extra top inset */
    margin-bottom: 6px;
    display: block;
    padding-top: 0px; /* remove top padding so title sits naturally */
    line-height: 1.2;
    font-size: 1.2em;
    transform: translateY(0.5px);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* reserve a small stable header area so body cannot overlap */
    flex: 0 0 auto;
    /* smaller min-height to reduce the gap while still allowing two short title lines */
    min-height: 1.6em;
    margin-bottom: 4px; /* tighten gap to content */
    padding: 0; /* no extra horizontal padding to align with tile inset */
}
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-title {
    margin-bottom: 6px;
    display: block;
    padding-top: 0px;
    line-height: 1.2;
    font-size: 1.2em;
    transform: translateY(0.5px);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    flex: 0 0 auto;
    min-height: 1.6em;
    margin-bottom: 4px;
    padding: 0;
}
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content {
    /* Make the content area flexible and scrollable so long bodies
       never push up into the title area. This keeps tiles visually
       stable regardless of content length. */
    flex: 1 1 auto;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0; /* no extra padding when scrollbar is hidden */
    /* hide scrollbars while preserving scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content {
    flex: 1 1 auto;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content::-webkit-scrollbar {
    width: 0; height: 0;
}

/* Create a comfortable but compact gap between text and images/blocks inside tiles
   so images don't sit flush against the preceding text. Targeted to
   850px tile view only to avoid changing popup rendering. */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content {
    line-height: 1.28; /* slightly tighter than popup */
}
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content p {
    margin-bottom: 0.34em !important;
}
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content img {
    display: block !important;
    margin: 0.34em 0 !important;
    max-width: 100%;
    height: auto;
    clear: both !important;
}

/* Extra-safety selectors: target images that follow any inline/block element
   so even when markup uses <br> or anchors, the image will get a top gap */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content * + img,
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content a > img {
    display: block !important;
    margin-top: 0.34em !important;
    clear: both !important;
}

/* In tiles at 850px, avoid the global `-webkit-line-clamp` display mode
   for collapsed previews so paragraph/image margins remain effective.
   We instead limit the content with max-height so markup flows naturally. */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content.collapsed {
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    /* keep preview bounded to the tile area */
    max-height: calc(100% - 2.6em) !important;
    overflow: hidden !important;
}

.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content.collapsed p {
    margin-bottom: 0.34em !important;
}

/* Mirror collapsed-preview behavior for 750px tiles so paragraph/image
   margins apply and previews match popup spacing. */
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content.collapsed {
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    /* keep preview bounded to the tile area */
    max-height: calc(100% - 2.6em) !important;
    overflow: hidden !important;
}
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content {
    line-height: 1.28;
}

.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content.collapsed p {
    margin-bottom: 0.34em !important;
}

/* Extra-safety selectors for images following elements in 750px tile view */
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content * + img,
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content a > img {
    display: block !important;
    margin-top: 0.34em !important;
    clear: both !important;
}

/* Prevent the first child inside note content from pushing upward
   and overlapping the title (common when content blocks have top margins). */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 950px: mirror protections so first-child doesn't overlap title */
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 950px: ensure title sits above content to avoid any visual overlap */
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-title {
    position: relative;
    z-index: 50;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* 950px: content stacking context behind title */
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content {
    position: relative;
    z-index: 1;
}

/* Hide note action buttons inside tile view at 950px — actions remain available in popup */
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-actions {
    display: none !important;
}

/* 950px: comfortable but compact gaps for paragraphs and images */
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content {
    line-height: 1.28;
}
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content p {
    margin-bottom: 0.34em !important;
}
/* Tighten headings inside tile view so they sit closer to text */
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content h1,
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content h2,
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content h3,
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content h1,
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content h2,
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content h3,
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content h1,
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content h2,
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content h3 {
    margin: 0 0 0.18em !important;
    line-height: 1.12 !important;
}
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content img {
    display: block !important;
    margin: 0.34em 0 !important;
    max-width: 100%;
    height: auto;
    clear: both !important;
}

/* Extra-safety selectors for images following elements in 950px tile view */
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content * + img,
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content a > img {
    display: block !important;
    margin-top: 0.34em !important;
    clear: both !important;
}

/* 950px: mirror collapsed-preview behavior so paragraph/image margins apply and previews match popup spacing. */
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content.collapsed {
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    max-height: calc(100% - 2.6em) !important;
    overflow: hidden !important;
}

.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content.collapsed p {
    margin-bottom: 0.34em !important;
}

/* Ensure title sits above content to avoid any visual overlap */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-title {
    position: relative;
    z-index: 50; /* raise above content */
    background: transparent; /* keep title background neutral */
    padding: 0; /* align left with tile padding */
    border-radius: 0;
}
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-title {
    position: relative;
    z-index: 50;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Content should be behind title in stacking context */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content {
    position: relative;
    z-index: 1;
}

/* Hide note action buttons inside tile view at 850px — actions remain available in popup */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-actions {
    display: none !important;
}
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-actions {
    display: none !important;
}
.sticky-note:nth-child(2n) {
    background: #e7f7ff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1.5px 0 #7ec6e2;
}
.sticky-note:nth-child(3n) {
    background: #ffe7f7;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1.5px 0 #e27ec6;
}
@media (pointer: fine) {
    .sticky-note:hover {
        box-shadow: 0 8px 32px rgba(0,0,0,0.18);
        transform: scale(1.01);
        z-index: 2;
    }
}
.sticky-note .note-title {
    font-size: 1.2em; /* unified title size for list and popup */
    font-weight: bold;
    margin-bottom: 10px;
    color: #000; /* default note title color set to black */
    background: none;
    padding: 0;
    border-radius: 0;
}
.sticky-note .note-content {
    font-size: 1em;
    color: var(--note-text-color);
    background: none;
    border: none;
    margin-bottom: 8px;
}

/* Collapsed note content: show up to 2 lines only */
.note-content.collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* Standard property for compatibility */
    line-clamp: 2;
    overflow: hidden;
}

/* Remove top margin of the first child inside collapsed content to avoid
   extra space between title and content when clamped. */
.note-content.collapsed > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure checklist items display properly in collapsed view */
.note-content.collapsed li[data-checked] {
    margin-bottom: 4px;
}


.note-actions {
    padding-left: 56px; /* reserve space on the left for the absolute expand button */
    justify-content: flex-end; /* other actions stay right-aligned */
}

.note-actions .expand-btn {
    position: absolute;
    left: 12px; /* align with note content left padding (nudged left) */
    bottom: 12px; /* nudged back toward previous position */
    margin-right: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5; /* keep above content to avoid causing reflow */
}

.note-actions .expand-btn i {
    color: var(--icon-color);
    font-size: 1.05em;
}

.note-actions .expand-btn:hover i { color: var(--btn-accent, #ff5858); }

/* Visually dim and disable interactions for disabled action buttons inside popups */
.note-actions button[disabled], .note-actions button[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* Also dim expand button when blurred (it may have .blurred class already) */
.expand-btn.blurred {
    opacity: 0.45;
    pointer-events: none;
}

/* Hint animation for expand controls - simplified for performance */
@keyframes expand-shake {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

.expand-hint {
    animation: expand-shake 400ms ease-in-out 2;
    will-change: transform;
}

/* When an expand button is blurred (note hidden), visually de-emphasize and disable it */
.expand-btn.blurred {
     filter: blur(2px);
     opacity: 0.6;
     pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .expand-hint { animation: none !important; }
}

/* Compact chip row for filters placed above the notes list */
.filter-chips {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 10px 0 6px 0;
    width: 100%;
    justify-content: flex-end; /* right-align the chip row */
}

/* When chips are in the top input row, keep them compact and don't stretch */
/* Keep default input-section layout; chips sit above the search bar in their original location. */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 16px;
    background-color: var(--container-bg);
    border: 1px solid rgba(0,0,0,0.16);
    cursor: pointer;
    color: var(--text-color);
    font-size: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    transition: transform 0.06s, box-shadow 0.1s;
    text-transform: none;
    font-weight: 400;
    will-change: transform, box-shadow;
}

/* Ensure the total notes chip never stacks its label and count */
#totalNotesChip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important; /* remove flex gap between label and count */
    white-space: nowrap !important;
}
#totalNotesChip .chip-label, #totalNotesChip > span {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important; /* ensure no internal spacing */
}
#totalNotesChip .chip-label { display: none !important; } /* hide "Notes:" label, show count only */

/* Pagination page info styled like chips */
#paginationControls span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 16px;
    background-color: var(--container-bg);
    border: 1px solid rgba(0,0,0,0.16);
    color: var(--text-color);
    font-size: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.dark-mode #paginationControls span {
    background-color: var(--container-bg);
    color: var(--text-color);
    border-color: rgba(255,255,255,0.16);
    box-shadow: 0 1px 6px rgba(0,0,0,0.28);
}

.chip i { font-size: 1.05em; }
.chip .chip-label { display: inline-block; }

.chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* Visual states when filters are active - JS uses .favorite-active / .star-active */
.chip.favorite-active {
    border-color: rgba(255,0,0,0.12);
    background-color: rgba(255,0,0,0.03);
}
.chip.favorite-active i { color: var(--fav-color); }
.chip.favorite-active svg { fill: currentColor; stroke: var(--fav-color); }

.chip.star-active {
    border-color: rgba(255,215,0,0.12);
    background-color: rgba(255,215,0,0.03);
}
.chip.star-active i { color: var(--star-color); }
.chip.star-active svg { fill: currentColor; stroke: var(--star-color); }

.chip.locked-active {
    border-color: rgba(123,92,255,0.12);
    background-color: rgba(123,92,255,0.03);
}
.chip.locked-active i { color: var(--lock-color); }

/* Archived chip active styling */
.chip.archived-active {
    border-color: rgba(100,116,139,0.12);
    background-color: rgba(100,116,139,0.03);
}
.chip.archived-active i { color: #64748b; }

/* Collapse chip active styling (follows same design guidelines as other filter chips) */
.chip.collapse-active {
    border-color: rgba(111,66,193,0.12);
    background-color: rgba(111,66,193,0.03);
}
.chip.collapse-active i { color: var(--collapse-color); }

/* Pressed effect for collapse chip to match other chips' active affordance */
.chip.collapse-active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
}
.chip.collapse-active:hover { transform: translateY(1px); }

/* View toggle chip - icon only, auto-width */
#collapseFilterIcon {
    padding: 6px 8px; /* tighter padding for icon-only chip */
    gap: 0; /* no gap since there's no label */
}

/* Ensure default icon color for the collapse chip when inactive matches other chips */
#collapseFilterIcon i { color: var(--icon-color); }

/* ── Wallpaper-active chip contrast ─────────────────────────────────────────────
   When a wallpaper is set, chips need stronger visual weight so they don't disappear
   against bright or busy backgrounds (light mode) or dark/photo backgrounds.       */

/* Light mode + wallpaper: semi-opaque white fill, stronger border and shadow */
.has-wallpaper .chip {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.24);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

/* Active states: bump opacity so colored states are visible over the wallpaper */
/* locked-active intentionally omitted — inherits the neutral white base, icon color still shows */
.has-wallpaper .chip.favorite-active {
    background-color: rgba(255, 0, 0, 0.14);
    border-color: rgba(255, 0, 0, 0.35);
}
.has-wallpaper .chip.star-active {
    background-color: rgba(255, 215, 0, 0.18);
    border-color: rgba(255, 215, 0, 0.45);
}
.has-wallpaper .chip.archived-active {
    background-color: rgba(100, 116, 139, 0.18);
    border-color: rgba(100, 116, 139, 0.38);
}
.has-wallpaper .chip.collapse-active {
    background-color: rgba(111, 66, 193, 0.14);
    border-color: rgba(111, 66, 193, 0.38);
}

/* Dark mode + wallpaper: semi-opaque dark fill */
.has-wallpaper.dark-mode .chip {
    background-color: rgba(28, 28, 34, 0.90);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.36);
}

/* ============================================
   FOLDER FILTER CHIP & DROPDOWN
   ============================================ */
.folder-filter-wrapper {
    position: relative;
    display: inline-flex;
}

/* Tighter icon-to-label gap for the folder filter chip */
#folderFilterChip { gap: 5px; }

.chip.folder-active {
    border-color: rgba(0, 150, 136, 0.2);
    background-color: rgba(0, 150, 136, 0.06);
}
.chip.folder-active i,
.chip.folder-active svg { color: #009688; }

.folder-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-width: 320px;
    background: var(--container-bg);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    padding: 6px 0;
    overflow: hidden;
}
.dark-mode .folder-dropdown {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.folder-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color);
    transition: background 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.folder-dropdown-item:hover {
    background: rgba(0,0,0,0.04);
}
.dark-mode .folder-dropdown-item:hover {
    background: rgba(255,255,255,0.06);
}
.folder-dropdown-item.active {
    font-weight: 600;
    color: #009688;
}
.folder-dropdown-item .folder-count {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.6;
}
.folder-dropdown-item .folder-check {
    width: 16px;
    display: inline-flex;
    flex-shrink: 0;
}
.folder-dropdown-separator {
    height: 1px;
    background: rgba(128, 128, 128, 0.25);
    margin: 4px 10px;
}

@media (max-width: 520px) {
    .folder-dropdown {
        right: auto;
        left: 0;
        min-width: 180px;
    }
}

@media (max-width: 520px) {
    .chip .chip-label { display: none; }
    .chip { padding: 6px; border-radius: 12px; }
    /* Keep folder chip label visible on mobile for clarity */
    #folderFilterChip .chip-label { display: inline-block; font-size: 11px; }
}

.dark-mode .chip {
    border-color: rgba(255,255,255,0.16);
}

/* Dark-mode: folder name input in Folders tab */
.dark-mode #newFolderNameInput {
    border-color: rgba(255,255,255,0.16);
}

/* Folders list styling */
.folders-list {
    font-family: inherit;
    background-color: transparent;
    border: none;
    color: var(--text-color);
}

/* Folders table styling */
.folders-table {
    font-family: inherit;
    background-color: transparent;
    border: none;
    color: var(--text-color);
}
.folders-table th,
.folders-table td {
    font-family: inherit;
    background-color: transparent;
    border: none;
    color: var(--text-color);
}
.folders-table th {
    font-weight: 600;
    opacity: 0.9;
}
.folders-table td {
    font-weight: 400;
}
.folders-table tr:hover td {
    background: rgba(128, 128, 128, 0.05);
}
.dark-mode .folders-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* Admin Users table — responsive chip/icon toggle */
.admin-status-mobile { display: none; }
.admin-status-desktop { display: inline-flex; }
@media (max-width: 520px) {
    .admin-status-mobile { display: inline-flex; align-items: center; }
    .admin-status-desktop { display: none !important; }
}

/* Admin Content tab — note card wrappers */
.admin-note-card-wrapper {
    margin-bottom: 10px;
}
.admin-note-owner {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
    padding-left: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sticky-note.admin-note-readonly {
    cursor: pointer;
    min-height: unset;
    padding: 12px 14px 10px;
}
.sticky-note.admin-note-readonly:hover {
    transform: translateY(-1px);
}
.admin-note-chevron {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: inherit;
    opacity: 0.55;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: opacity 0.15s, transform 0.2s;
    flex-shrink: 0;
}
.admin-note-chevron:hover { opacity: 1; }
.admin-note-chevron.expanded i { transform: rotate(180deg); }
#adminContentResults { padding-bottom: 4px; }

/* Tags: force visible inside admin note cards and popup (override any global hide rules) */
#adminContentResults .sticky-note .note-tags,
#adminNoteViewContent .note-tags {
    display: flex !important;
    flex-wrap: wrap;
}

/* Attachment list in admin note popup */
.admin-note-attachments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.admin-note-attachment-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.8;
}

/* Dark-mode: increase contrast for filter icons (icons only). Keep active colors unchanged. */
.dark-mode .filter-chips .chip:not(.favorite-active):not(.star-active):not(.archived-active) i {
    color: rgba(255,255,255,0.78);
}

/* Ensure locked-active keeps its color in dark mode (override generic dark icon rule) */
.dark-mode .filter-chips .chip.locked-active i {
    color: var(--lock-color) !important;
}

/* Ensure archived-active keeps its color in dark mode */
.dark-mode .filter-chips .chip.archived-active i {
    color: #94a3b8 !important;
}

/* Disable pressed/pressed-like visual for collapse/expand chips.
   Keep the normal hover feedback, but prevent the chip from appearing
   'pressed' (translated or inset-shadow) when active/toggled. */
#collapseFilterIcon.collapse-active,
.chip.collapse-active {
    transform: none !important;
    box-shadow: none !important;
}

/* Mobile-specific override that previously applied a translateY; clear it here too */
#collapseFilterIcon.collapse-active {
    transform: none !important;
    box-shadow: none !important;
}

/* Ensure collapse chip looks like other chips even when toggled */
#collapseFilterIcon.collapse-active {
    background-color: var(--container-bg) !important;
    /* Use neutral border color; dark-mode override below ensures sufficient contrast */
    border-color: rgba(0,0,0,0.16) !important;
    color: var(--text-color) !important;
}
#collapseFilterIcon.collapse-active i,
#collapseFilterIcon.collapse-active .chip-label {
    color: var(--text-color) !important;
}

/* Dark-mode: ensure the Tiles/Collapse chip retains visible border contrast */
.dark-mode #collapseFilterIcon {
    border-color: rgba(255,255,255,0.16); /* higher contrast on dark backgrounds */
    box-shadow: 0 1px 6px rgba(0,0,0,0.28);
}

/* Dark-mode: active state should also use a light border instead of forcing black */
.dark-mode #collapseFilterIcon.collapse-active {
    border-color: rgba(255,255,255,0.16) !important;
    background-color: var(--container-bg) !important;
}

/* NOTE: expand button placed into the actions area (absolute at left) */
.sticky-note .note-actions {
    display: flex;
    gap: 0; /* tightened spacing between action icons */
    justify-content: flex-end;
    padding-top: 5px;
    border: none;
}
.sticky-note .timestamp {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    margin-bottom: 0;
}

@media (max-width: 750px) {
    #stickyNotesContainer {
        gap: 12px;
    }
    .sticky-note {
        padding: 14px 8px 14px 10px;
    }
    /* Ensure tags align flush with timestamp on mobile */
    .sticky-note .note-tags {
        margin-left: 0;
        padding-left: 0;
    }
}
html {
    overflow-x: hidden; /* prevent any element escaping horizontally from creating a page scrollbar */
}

/* Global Styles */
* {
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    background-color: var(--bg);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    background-color: var(--container-bg);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: var(--container-width, 600px); /* Use saved width with 600px fallback */
    max-width: 90%; /* Ensures it’s responsive on smaller screens */

    /* Prevent scrollbars and ensure responsiveness */
    overflow: visible;
    /* Wallpaper applied via CSS variable so it doesn't force layout reflow */
    background-image: var(--container-wallpaper);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 8px auto;       /* 8px top/bottom, centered on desktop */
}

/* Container width is managed dynamically via inline style (600/700/800). */

/* Hide the container-expand icon only on very small/mobile viewports */
@media (max-width: 420px) {
    .header-actions #containerExpandIcon { display: none !important; }
}

/* Subtle inner highlight for main container only (no radius/layout changes) */
/* Implemented with a pseudo-element so existing radius/box-shadow remain untouched. */
.container {
    position: relative; /* create positioning context for ::before */
}
.container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    background-clip: padding-box; /* avoid overlapping outer border */
}
.dark-mode .container::before {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
/* Dark mode container: subtle border for clean edge separation */
.dark-mode .container {
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

/* ── Signed-out landing page ─────────────────────────────────────────────
   Viewport-fitted, no scrollbars.  Container keeps its normal width
   (inline style from JS / media-query 100vw on mobile) and stretches
   vertically to fill the viewport.  dvh adapts to mobile browser chrome. */

body:has(.container.signed-out) {
    height: 100dvh;
    overflow: hidden;
    flex-direction: column;     /* so flex:1 below grows HEIGHT, not width */
}

.container.signed-out {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.container.signed-out #stickyNotesContainer {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


h1 {
    font-family: 'Unica One';
    font-size: 2em;
    text-align: center;
}

.home-link {
    text-decoration: none;
    color: inherit;
}

.home-link:hover h1 {
    color: #000000; /* Optional: change color on hover */
}

.input-section button {
    font-family: 'Unica One';
    font-size: 15px;
    padding: 14px 12px;
    width: 100%; /* fill parent */
    max-width: 98vw; /* Ensures it’s responsive on smaller screens */
    overflow-x: auto;
}

@media (max-width: 850px) {
    .container {
        width: 100vw;
        max-width: 100vw;
        padding: 8px 2px;
        box-sizing: border-box;
    }
    .sticky-note {
        padding: 10px 4px 10px 8px;
        min-height: 80px;
    }
}

/* Mobile-specific, non-destructive overrides for narrow viewports.
   Scoped to elements that need layout/touch adjustments only. */
@media (max-width: 520px) {
    /* Pin the container to the top of the screen on mobile.
       body uses align-items:center globally, which causes the container to
       visibly jump vertically whenever its height changes (e.g. when toggling
       between List and Tiles view, the tiles mode container is much shorter
       than the list mode container). flex-start keeps it top-anchored. */
    body {
        align-items: flex-start;
    }

    .container {
        width: calc(100vw - 10px);   /* 5px margin each side */
        max-width: calc(100vw - 10px);
        margin: 5px auto;            /* uniform 5px gap on all sides */
        padding: 10px 8px;
        border-radius: 12px;
        box-sizing: border-box; /* padding included in width — prevents overflow */
    }

    /* Make the primary action smaller but still tappable */
    #newNoteButton {
        width: 48px;
        height: 48px;
        padding: 0;
        font-size: 30px;
        border-radius: 50%;
    }
    #newNoteButton svg {
        width: 20px;
        height: 20px;
    }

    /* Notes: tighter padding, slightly reduced min-height for mobile */
    .sticky-note {
        padding: 12px 10px;
        min-height: 76px;
        border-radius: 10px;
    }

    .sticky-note .note-title {
        font-size: 1.05em;
    }

    /* Improve Settings popup on small screens: make it near-fullscreen
       and present tabs in a single row for easy tapping. This reduces
       awkward internal scrolling and keeps navigation accessible. */
    @media (max-width: 520px) {
        /* Fixed-height mobile settings popup: reserve space for system UI
           and ensure the tab headers remain visible. Tab content scrolls
           internally so popup height doesn't change when switching tabs. */
        #settingsPopup .popup-content {
            width: calc(100vw - 24px) !important;
            max-width: 100vw !important;
            height: calc(100dvh - 24px) !important;  /* fill viewport minus margins */
            max-height: calc(100dvh - 24px) !important;
            margin: 12px auto !important;
            padding: 14px !important;
            border-radius: 12px !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
        }

        /* Keep header row fixed; allow horizontal scrolling without showing scrollbar */
        #settingsPopup .tab-headers {
            flex: 0 0 auto;
            display: flex;
            gap: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 8px;
            margin-bottom: 6px;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE 10+ */
        }
        #settingsPopup .tab-headers::-webkit-scrollbar { height: 0; display: none; }

        /* Tab content fills remaining area and scrolls internally */
        #settingsPopup .tab-content {
            flex: 1 1 auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-right: 6px;
        }
    }

    /* Desktop: force Settings popup to a fixed, taller height (overrides inline) */
    @media (min-width: 521px) {
        #settingsPopup .popup-content {
            height: 150vh !important;
            max-height: 150vh !important;
            width: auto !important;
            max-width: 920px !important;
            margin: 2vh auto !important;
            padding: 18px !important;
            border-radius: 12px !important;
            overflow-y: auto !important;
            box-sizing: border-box !important;
        }
    }

    /* Tab headers: single-line horizontally scrollable row */
    #settingsPopup .tab-headers {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-bottom: 6px;
        /* Hide native scrollbar while preserving touch/arrow scroll */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

/* Hide webkit scrollbar for all note content and settings */
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content::-webkit-scrollbar,
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content::-webkit-scrollbar,
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content::-webkit-scrollbar,
#settingsPopup .tab-headers::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
        font-size: 13px;
        border-radius: 8px;
        background: transparent;
        white-space: nowrap;
    }

    /* Tab content should fill remaining popup area and allow keyboard/focus navigation
       while keeping content visible. Use internal scroll only if absolutely necessary. */
    #settingsPopup .tab-content {
        flex: 1 1 auto;
        overflow: auto; /* allow vertical scroll only when content exceeds viewport */
        -webkit-overflow-scrolling: touch;
        padding-right: 6px;
    }

    /* Make controls larger and spaced for touch targets */
    #settingsPopup label, #settingsPopup p, #settingsPopup select, #settingsPopup input, #settingsPopup button {
        font-size: 15px;
    }

    /* Keep close button visible and tappable */
    #settingsPopup .close-button {
        top: 10px !important;
        right: 12px !important;
        z-index: 20000 !important;
    }

    /* Slightly larger readable content on mobile */
    .note-content {
        font-size: 14px;
        line-height: 1.3;
    }

    /* Increase spacing between action icons for touch targets */
    .note-actions {
        gap: 6px;
        padding-top: 4px;
        padding-left: 0; /* no reservation needed — expand-btn is now in-flow */
        justify-content: flex-end;
    }

    .note-actions button {
        padding: 6px; /* expands tap target without affecting global button rules */
    }

    .note-actions button i,
    .note-actions button svg.lucide {
        font-size: 18px; /* ensure icons are large enough for touch */
    }

    /* Expand button: in-flow, extreme left, pushes all other icons to the right */
    .note-actions .expand-btn {
        position: relative;
        left: auto;
        bottom: auto;
        margin-right: auto; /* pushes everything else to the far right */
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }

    /* Popup: mobile-friendly but not full-screen — keep margins and rounded corners */
    .popup-content {
        width: 92vw !important;
        max-width: 720px !important;
        height: auto !important;
        max-height: 88vh !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 12px !important;
        overflow: auto !important;
        box-sizing: border-box;
    }

    /* Center popups on mobile */
    .popup {
        align-items: center !important;
    }

    /* Keep the close button visually on top of any blurred content inside popup */
    .popup .close-button {
        right: 12px;
        top: 6px;
        font-size: 25px;
        position: absolute;
        z-index: 10020 !important; /* above popup-content children */
        background: transparent;
        color: red !important; /* small red X like desktop */
        width: auto;
        height: auto;
        padding: 6px; /* keep a tappable area */
        border-radius: 6px;
        box-shadow: none;
        cursor: pointer;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .popup .close-button:hover {
        color: darkred !important;
        transform: none;
    }

    /* Keep search input usable on mobile */
    #searchInput {
        padding: 8px 30px 8px 34px;
        font-size: 14px;
    }

    /* Preserve chip compactness on small screens (labels already hidden at <=520px elsewhere)
       We do not force hiding here to avoid surprising desktop behavior. */

    /* ── Mobile list view: show only 7 primary actions ──────────────────────────
       View/Eye, Starred, Move-to-Folder and Archive are hidden in the card row;
       they remain fully visible when the note is opened in the popup view.
       The popup's .note-actions is inside #viewPopup, not #stickyNotesContainer,
       so these rules never touch it. */
    #stickyNotesContainer .note-actions button[title="Move to Folder"],
    #stickyNotesContainer .note-actions button[title="Archive"],
    #stickyNotesContainer .note-actions button[title="Restore from Archive"] {
        display: none !important;
    }

    /* Reorder the 9 visible icons: Eye | Color | Edit | Favorite | Star | Attachment | Tags | Share | Delete
       expand-btn (order 0, margin-right:auto) stays far-left; rest fill the right side. */
    #stickyNotesContainer .note-actions .expand-btn                          { order: 0; }
    #stickyNotesContainer .note-actions button[title="View"],
    #stickyNotesContainer .note-actions button[title="Hidden (click to show)"] { order: 1; }
    #stickyNotesContainer .note-actions button[title="Color"]                { order: 2; }
    #stickyNotesContainer .note-actions button[title="Edit"]                 { order: 3; }
    #stickyNotesContainer .note-actions button[title="Favorite"],
    #stickyNotesContainer .note-actions button[title="Unfavorite"]           { order: 4; }
    #stickyNotesContainer .note-actions button[title="Starred"],
    #stickyNotesContainer .note-actions button[title="Unstar"]               { order: 5; }
    #stickyNotesContainer .note-actions .attachment-btn                      { order: 6; }
    #stickyNotesContainer .note-actions button[title="Tags"]                 { order: 7; }
    #stickyNotesContainer .note-actions button[title="Share"]                { order: 8; }
    #stickyNotesContainer .note-actions button[title="Delete"]               { order: 9; }
    #stickyNotesContainer .note-actions .note-mobile-more-btn                { order: 10; }

    /* Show the ⋮ more-actions button in tiles view only (compact hides .note-actions entirely) */
    #stickyNotesContainer:not(.collapsed-list-mode) .note-mobile-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Mobile compact 2-column view ────────────────────────────────────────────
   ONE class on #stickyNotesContainer → ONE browser paint → zero flash.
   Key rule: we NEVER change display or line-clamp on .note-content.
   Notes with .collapsed keep their display:-webkit-box;clamp:2 state unchanged.
   Notes without .collapsed keep their normal block display state unchanged.
   The tile's aspect-ratio + overflow:hidden clips everything visually.
   No content layout change → no intermediate repaint state → no shift/jump.    */
@media (max-width: 520px) {
    /* 2-column grid */
    #stickyNotesContainer.collapsed-list-mode {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Square tiles — aspect-ratio locks height, overflow clips children */
    #stickyNotesContainer.collapsed-list-mode .sticky-note {
        aspect-ratio: 1 / 1;
        min-height: 0;
        overflow: hidden;
        padding: 8px 10px;
        transition: none !important; /* prevent any animated layout reflow */
    }

    /* Suppress transitions on all children during the layout switch */
    #stickyNotesContainer.collapsed-list-mode .sticky-note * {
        transition: none !important;
    }

    /* Title: always left-aligned, compact font */
    #stickyNotesContainer.collapsed-list-mode .sticky-note .note-title {
        text-align: left;
        font-size: 0.9em;
        line-height: 1.2;
        margin-bottom: 4px;
        padding: 0;
    }

    /* Hide actions, timestamp, attachments, tags — title + content tiles only. */
    #stickyNotesContainer.collapsed-list-mode .sticky-note .note-actions,
    #stickyNotesContainer.collapsed-list-mode .sticky-note .timestamp,
    #stickyNotesContainer.collapsed-list-mode .sticky-note .note-attachment-row,
    #stickyNotesContainer.collapsed-list-mode .sticky-note .note-tags {
        display: none !important;
    }

    /* Show note content in compact tiles — small, clipped by tile overflow:hidden. */
    #stickyNotesContainer.collapsed-list-mode .sticky-note .note-content {
        display: block !important;
        /* override any .collapsed line-clamp so content just flows naturally */
        -webkit-box-orient: unset !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: hidden;
        font-size: 0.72em;
        line-height: 1.45;
        padding: 0;
        margin: 0;
        /* No mask by default — only applied when content overflows the tile (see below) */
    }

    /* Bottom fade: only show when JS detects that content actually reaches the bottom
       of the tile. JS adds .content-overflows to the .sticky-note when
       noteDiv.scrollHeight > noteDiv.clientHeight. Short notes (1-2 lines) never get
       this class and never show the fade. */
    #stickyNotesContainer.collapsed-list-mode .sticky-note.content-overflows .note-content {
        -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 95%);
        mask-image: linear-gradient(to bottom, black 40%, transparent 95%);
    }

    /* Suppress blurred/hidden blur on content inside compact tiles so the fade
       still reads cleanly — user can open the popup to see the full note. */
    #stickyNotesContainer.collapsed-list-mode .sticky-note .note-content.blurred {
        filter: none !important;
    }
}

.input-section input {
    flex: 1;
    padding: 8px;
    font-size: 16px;
    width: 100%;	
    background-color: var(--search-bg);
    color: var(--search-text);
    border: 1px solid rgba(0,0,0,0.12);
}

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

/* Material-like styling for the notes-per-page dropdown in Settings (matches search input) */
#notesPerPageSelect {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--search-bg);
    color: var(--search-text);
    border: 1px solid rgba(0,0,0,0.12);
    padding: 8px 34px 8px 10px; /* room for chevron */
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: box-shadow 0.16s, border-color 0.16s, transform 0.08s;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

/* Constrain editor and preview images so they don't appear massive
   and always fit within note / popup dimensions. */
.ql-editor img,
.note-content img,
.sticky-note img,
#popupNoteContent img {
    max-width: 100%;
    height: auto;
    max-height: 360px; /* cap extremely tall images */
    display: block;
    margin: 8px 0;
    object-fit: contain;
    border-radius: 6px;
}

/* Smaller thumbnails when note content is collapsed (list view previews) */
.note-content.collapsed img {
    max-height: 120px !important;
    object-fit: cover !important;
}

/* Override container-specific img rules when collapsed (tiles view thumbnails) */
.container #stickyNotesContainer .sticky-note .note-content.collapsed img {
    max-height: 120px !important;
    object-fit: cover !important;
}

/* Popups should allow larger but bounded images */
#popupNoteContent img {
    max-height: 60vh;
}

/* ============================================
   MAP EMBED STYLES
   ============================================ */

/* Map embed container - responsive wrapper for iframes */
.map-embed {
    margin: 12px 0;
    clear: both;
}

.map-embed-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: #f0f0f0;
}

.dark-mode .map-embed-wrapper {
    background: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.map-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

/* Map embeds in the Quill editor */
.ql-editor .map-embed {
    margin: 12px 0;
}

/* Map embeds in note content (list view and tiles) */
.note-content .map-embed,
.sticky-note .map-embed,
#popupNoteContent .map-embed {
    margin: 12px 0;
    max-width: 100%;
}

/* Smaller map previews when note content is collapsed (list view) */
.note-content.collapsed .map-embed-wrapper {
    padding-bottom: 40%; /* Shorter aspect ratio for collapsed view */
    max-height: 120px;
}

/* Override container-specific rules when collapsed (tiles view) */
.container #stickyNotesContainer .sticky-note .note-content.collapsed .map-embed-wrapper {
    padding-bottom: 40%;
    max-height: 120px;
}

/* Full-size maps in popup view */
#popupNoteContent .map-embed-wrapper {
    padding-bottom: 56.25%; /* Full 16:9 ratio in popups */
    max-height: none;
}

/* Ensure maps don't get too large on mobile */
@media (max-width: 520px) {
    .map-embed-wrapper {
        padding-bottom: 75%; /* Slightly taller ratio on mobile (4:3) */
        max-height: 280px;
    }
    
    .note-content.collapsed .map-embed-wrapper {
        max-height: 100px;
    }
}

/* Container size specific adjustments for expanded tiles */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content .map-embed,
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content .map-embed,
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content .map-embed {
    margin: 8px 0;
}

/* Ensure map embeds get proper spacing like images */
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content * + .map-embed {
    margin-top: 8px;
}

.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content * + .map-embed {
    margin-top: 8px;
}

.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content * + .map-embed {
    margin-top: 8px;
}

@media (max-width: 520px) {
    .ql-editor img, .note-content img, #popupNoteContent img {
        max-height: 240px;
    }
}

/* When the wallpaper controls are disabled, dim the preview image to match file picker */
#wallpaperSection.controls-disabled #wallpaperPreview {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(60%) brightness(0.7);
    pointer-events: none;
}

#notesPerPageSelect:focus {
    border-color: rgba(0,0,0,0.18);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Dark-mode tweak: make chevron lighter */
.dark-mode #notesPerPageSelect {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Mobile-specific overrides for Collapse/Expand chip to match other chips */
@media (max-width: 520px) {
    #collapseFilterIcon {
        min-width: 0 !important; /* allow compact width on mobile */
        padding: 6px !important;
        gap: 6px !important;
        border-radius: 12px !important;
        justify-content: center !important;
    }
    #collapseFilterIcon .chip-label { display: none !important; }
    #collapseFilterIcon i { font-size: 1.05em; color: var(--icon-color); }
    /* Keep mobile appearance consistent with desktop: no pressed transformation */
    #collapseFilterIcon.collapse-active { transform: none !important; box-shadow: none !important; }
}

/* Style the file input's button to match the material select/button look */
#fileInput {
    font-size: 14px;
    color: var(--search-text);
    background: transparent;
    border: none;
    outline: none;
}

/* Chrome, Edge, Safari */
#fileInput::-webkit-file-upload-button {
    background-color: var(--search-bg);
    color: var(--search-text);
    border: 1px solid rgba(0,0,0,0.12);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    cursor: pointer;
}

/* Standard selector for modern browsers */
#fileInput::file-selector-button {
    background-color: var(--search-bg);
    color: var(--search-text);
    border: 1px solid rgba(0,0,0,0.12);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    cursor: pointer;
}

#fileInput::-webkit-file-upload-button:hover,
#fileInput::file-selector-button:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.18);
}

.dark-mode #fileInput::-webkit-file-upload-button,
.dark-mode #fileInput::file-selector-button {
    background-color: var(--search-bg);
    color: var(--search-text);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Make the wallpaper file input match the import file input appearance */
#wallpaperFileInput {
    font-size: 14px;
    color: var(--search-text);
    background: transparent;
    border: none;
    outline: none;
}

#wallpaperFileInput::-webkit-file-upload-button {
    background-color: var(--search-bg);
    color: var(--search-text);
    border: 1px solid rgba(0,0,0,0.12);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    cursor: pointer;
}

#wallpaperFileInput::file-selector-button {
    background-color: var(--search-bg);
    color: var(--search-text);
    border: 1px solid rgba(0,0,0,0.12);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    cursor: pointer;
}

.dark-mode #wallpaperFileInput::-webkit-file-upload-button,
.dark-mode #wallpaperFileInput::file-selector-button {
    background-color: var(--search-bg);
    color: var(--search-text);
    border: 1px solid rgba(255,255,255,0.06);
}

#editor {
    font-size: 14px; /* match search input */
    width: 100%;
    box-sizing: border-box;
    max-width: none; /* allow editor to expand with container */
    min-height: 200px; /* start height but allow growth */
    height: auto;
    margin-bottom: 0px;
    border: 1px solid rgba(0,0,0,0.12);
    background-color: var(--editor-bg);
    border-radius: 4px;
    margin-bottom: 5px; /* Add space below the editor */
    color: var(--note-text-color);
    transition: background-color 0.25s ease;
}
.dark-mode #editor {
    border-color: rgba(255,255,255,0.06);
}

#editor .ql-editor {
    transition: background-color 0.25s ease, color 0.25s ease;
}

#noteTitleInput {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Quill-generated wrapper must also fill the editor section */
.ql-container {
    width: 100% !important;
    box-sizing: border-box;
}

/* Button Theme selector swatches in Settings */
.theme-swatch-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
}
.swatch-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18), inset 0 0 0 2px rgba(0,0,0,0.07);
    overflow: hidden;
    cursor: pointer;
}
.theme-swatch input[type="radio"] {
    margin-top: 8px;
}
.swatch-label {
    font-size: 12px;
    color: var(--muted-text);
    margin-top: 6px;
}

/* Small helper: ensure action/export/editor buttons look good when JS sets inline backgrounds */
.themed-btn {
    color: var(--btn-fg, #000) !important;
}


/* Default Quill fonts */
.ql-font-sans-serif {
    font-family: Arial, Helvetica, sans-serif;
}

.ql-font-arial {
    font-family: Arial, Helvetica, sans-serif;
}

.ql-font-roboto {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.ql-font-sans-serif {
    font-family: Arial, Helvetica, sans-serif;
}

.ql-font-tahoma {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

/* Make font dropdown options and Quill picker items display in their font
   so users can preview the typeface before selecting. Targets both the
   native <select> option and Quill's generated .ql-picker-item elements. */
.ql-font option[value="arial"], .ql-picker .ql-picker-item[data-value="arial"] {
    font-family: Arial, Helvetica, sans-serif;
}
.ql-font option[value="roboto"], .ql-picker .ql-picker-item[data-value="roboto"] {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
.ql-font option[value="sans-serif"], .ql-picker .ql-picker-item[data-value="sans-serif"] {
    font-family: Arial, Helvetica, sans-serif;
}
.ql-font option[value="tahoma"], .ql-picker .ql-picker-item[data-value="tahoma"] {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

/* Ensure the visible picker label uses the selected font when possible.
   Quill renders the selected label in .ql-picker-label; lightweight hint
   to inherit the current font family if Quill supports it. */
.ql-font + .ql-picker-label, .ql-picker .ql-picker-label {
    font-family: inherit;
}


/* Default Quill font sizes */
.ql-size-small {
    font-size: 0.75em;
}

.ql-size-large {
    font-size: 1.5em;
}

/* NOTE POPUP OPEN ANIMATION: scale bounce - optimized for mobile */
.popup-content.note-open-scale {
    animation: note-open-scale 180ms cubic-bezier(.34,.1,.68,.55) forwards;
    transform-origin: center center;
    will-change: transform, opacity;
}

@keyframes note-open-scale {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.ql-size-huge {
    font-size: 2.5em;
}

.delete-all {
    font-family: 'Unica One';
    font-size: 15px;
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    background-color: #ff4c4c;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.export-all {
    font-family: 'Unica One';
    font-size: 15px;
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    background: var(--btn-gradient, #f472b6);
    color: var(--btn-fg, #000);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

#itemList {
    list-style-type: none;
    padding: 0;
}

#itemList li {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

#itemList button {
    background-color: #ff4c4c;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
}

th, td {

    padding: 5px;
    border: 1px solid #ddd;
    text-align: left;
}

th {
    font-family: "Merriweather", serif;
    background-color: #f2f2f2;
}

td button {
    padding: 4px 8px;
}


/* Style for icon buttons */
button {
    background: none;
    border: none;
    cursor: pointer;
}

button i {
    font-size: 16px; /* Adjust size as needed */
    color: #555; /* Icon color */
}

button:hover i {
    color: #007bff; /* Icon color on hover */
}

#newNoteButton {
    font-family: 'Unica One';
    font-size: 32px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--btn-gradient, #f472b6);
    color: var(--btn-fg, #000);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);
    letter-spacing: 0;
    line-height: 1;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
}
#newNoteButton svg {
    width: 22px;
    height: 22px;
}
#newNoteButton:hover {
    background: var(--btn-gradient, #f472b6);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 3px 10px rgba(0,0,0,0.2);
    transform: translateY(-2px) scale(1.08);
}

/* Compact variant used for Drive import buttons inside popups */
.export-all.small-export-btn {
    display: inline-block;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
    min-width: 88px;
    width: auto;
    background: var(--btn-gradient, #f472b6);
    color: var(--btn-fg, #000);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.export-all.small-export-btn:hover {
    background: var(--btn-gradient, #f472b6);
    transform: translateY(-1px);
}

/* Button spinner */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: -2px;
    animation: spin 0.8s linear infinite;
}

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

.editor-btn.disabled, .export-all.disabled, .newnote-like.disabled, .export-all.small-export-btn.disabled {
    opacity: 0.65;
    pointer-events: none;
}

/* When the Google Drive export/import buttons are disabled, show them in red (Data tab style) */
#saveToDriveBtn.disabled,
#importFromDriveBtn.disabled {
    background-color: #ff4c4c !important;
    color: #fff !important;
}

/* Inline Google auth area in Export/Import tab */
.auth-inline { display:flex; justify-content:center; align-items:center; gap:8px; margin:8px 0; }
.google-user-info { display:flex; align-items:center; gap:8px; }
.google-user-pic { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.small-btn { padding:6px 8px; font-size:13px; border-radius:6px; border:1px solid rgba(0,0,0,0.06); background:#fff; cursor:pointer; }
.small-btn.disabled { opacity:0.6; cursor:default; }

/* Set table column widths */
#itemTable th:nth-child(1),
#itemTable td:nth-child(1) {
    width: 95%; /* Larger width for the "Item" column */
}

#itemTable th:nth-child(2),
#itemTable td:nth-child(2),
#itemTable th:nth-child(3),
#itemTable td:nth-child(3),
#itemTable th:nth-child(4),
#itemTable td:nth-child(4) {
    width: 10%; /* Equal narrow widths for "View," "Edit," and "Delete" columns */
    text-align: center; /* Center align for icons */
}


/* Optional: Center align text in smaller columns */
#itemTable th, #itemTable td {
    vertical-align: middle; /* Center align vertically */
    padding: 4px;
}


/* Additional styles to remove touch feedback on mobile */
#itemTable td {
    -webkit-tap-highlight-color: transparent; /* For iOS Safari */
    touch-action: manipulation; /* Prevents additional tap effects */
}

#itemTable td:active {
    background-color: transparent; /* Remove any active background color */
}

#paginationControls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

#paginationControls span {
    text-align: center;
    font-family: 'Unica One';
    font-weight: bold;
    font-size: 15px;
    color: #555;
    background-color: #f0f0f0;
    padding: 5px 10px;
    border-radius: 4px;
    line-height: 1;
}

#paginationControls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Unica One';
    background: none;
    border: none;
    cursor: pointer;
    color: var(--btn-accent, #007bff);
    padding: 4px 6px;
    line-height: 1;
}

#paginationControls button svg.lucide {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.search-and-filters {
    display: flex;
    align-items: center;
    gap: 5px; /* Adjust gap as needed */
    margin-top: 8px;
    margin-bottom: 8px;
    border: 0px solid #ddd;
}

.search-section {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 10px;
    font-size: 15px;
    color: var(--muted-text);
}

#searchInput {
    width: 100%;
    padding: 8px 30px 8px 30px; /* Extra padding on the right for the "X" icon */
    font-size: 14px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--search-bg);
    color: var(--search-text);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Dark-mode subtle border and remove light shadow */
.dark-mode #searchInput {
    border-color: rgba(255,255,255,0.06);
    box-shadow: none;
}

#clearSearch {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 25px;
    color: var(--muted-text);
    cursor: pointer;
    display: none; /* Hidden by default */
}

#clearSearch:hover {
    color: var(--danger-color); /* Hover uses danger color variable */
}

/* Dark-mode override for clear icon to ensure adequate contrast */
.dark-mode #clearSearch {
    color: rgba(255,255,255,0.7);
}
.dark-mode #clearSearch:hover {
    color: var(--danger-color);
}

.filter-options {
    font-size: 16px;
    display: flex;
    gap: 0.5px; /* Space between checkboxes */
    align-items: center;
    justify-content: flex-end;
/*    align-self: flex-end; */
    margin: 0px;  
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #ddd;
}

.filter-options label {
    display: flex; /* Ensures label and checkbox align side by side */
    align-items: center;
    font-family: Calibri, sans-serif;
    font-size: 15px;
    color: #333;
    cursor: pointer;
}

.filter-options input[type="checkbox"] {
    margin-right: 5px; /* Space between checkbox and label text */
    vertical-align: middle; /* Aligns checkbox with the label text */
}

/* Accent checkboxes with app theme color */
input[type="checkbox"] {
    accent-color: var(--btn-accent);
    vertical-align: middle;
    position: relative;
    top: -1px;
}


.title-container {

    position: relative;
    display: flex;
    justify-content: center; /* Center-aligns the h1 */
    align-items: center;
    margin-bottom: 4px;
    border: 0 px solid #ddd;
}

.title-container h1 {
    margin: 0;
    text-align: center; /* Center text inside h1 */
    width: 100%; /* Takes full width to maintain centering */
}

/* Unified header icon styling */
.input-section-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
}

/* input-section takes all available row space so the editor always fills the container */
.input-section-row .input-section {
    flex: 1;
    min-width: 0;
    width: 0; /* force block children to respect flex width rather than own content size */
    box-sizing: border-box;
}

/* Editor section and all its children must fill the input-section width */
#editorSection {
    width: 100%;
    box-sizing: border-box;
}

.input-section-row .header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

/* When the editor is open, hide header-actions so input-section fills the full row width */
.input-section-row:has(#editorSection[style*="display: block"]) .header-actions {
    display: none !important;
}

.header-actions .header-icon {
    font-size: 1.5em; /* slightly larger icon size */
    cursor: pointer;
    color: var(--icon-color);
}

.header-actions .header-icon:hover {
    color: #007bff;
}

/* Dark-mode override for header icons to keep contrast consistent */
.dark-mode .header-actions .header-icon {
    color: rgba(255,255,255,0.88);
}

/* Firebase user icon with status indicator */
#firebaseUserIcon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-status-dot {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    background-color: #ef4444; /* Red when signed out */
    border: 2px solid var(--container-bg);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
}

.user-status-dot.signed-in {
    background-color: #22c55e; /* Green when signed in */
}

.dark-mode .user-status-dot {
    border-color: #171717;
    background-color: #dc2626; /* Darker red for dark mode */
}

.dark-mode .user-status-dot.signed-in {
    background-color: #16a34a; /* Darker green for dark mode */
}

/* ########### GOOGLE AUTH ########### */
#googleUserInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--text-color);
}

#googleUserInfo img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    object-fit: cover;
}

#gSignInButton { display: inline-block; }

/* Ensure auth popup content matches other popups in dark mode */
.dark-mode #authPopup .popup-content { background: var(--popup-bg); }
/* ########### /GOOGLE AUTH ########### */

/* Sign-out button style matching #newNoteButton colors and centering */
.newnote-like {
    font-family: 'Unica One';
    font-size: 16px;
    width: 120px;
    padding: 12px;
    background: linear-gradient(90deg, #ff5858 0%, #f857a6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    margin: 0 auto; /* center within parent */
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    letter-spacing: 0.5px;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
}
.newnote-like:hover {
    background: linear-gradient(90deg, #f857a6 0%, #ff5858 100%);
    box-shadow: 0 4px 16px rgba(255,88,88,0.18);
    transform: translateY(-2px) scale(1.04);
}

/* Status and active classes that respect theme variables */
.status-success { color: var(--success-color); }
.status-danger { color: var(--danger-color); }

.favorite-active { color: var(--fav-color) !important; }
.star-active { color: var(--star-color) !important; }
.theme-dark-icon { color: var(--theme-icon-dark) !important; }

/* Ensure popup showing a note with pastel background uses dark text */
.popup-note-dark-text { color: #000 !important; }

/* spacing handled by .header-actions flex container */


.timestamp {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

/* ── Note attachment row ────────────────────────── */
.note-attachment-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 3px 0 0 0;
}
.attachment-clip-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--muted-text, #888);
}
.attachment-clip-icon svg,
.attachment-clip-icon i { width: 14px; height: 14px; }
.attachment-filename-text {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-text, #888);
    font-size: 11px;
    cursor: pointer;
    align-self: center;
    line-height: 1;
}
.attachment-filename-text:hover { text-decoration: underline; }
.attachment-remove-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    color: #e05555;
    display: inline-flex;
    align-items: center;
    align-self: center;
    vertical-align: middle;
}
.attachment-remove-btn:hover { color: #c03030; }
.attachment-remove-btn svg {
    width: 14px;
    height: 14px;
    color: #e05555;
    stroke: #e05555;
    fill: none;
    display: block;
}
.attachment-remove-btn:hover svg { color: #c03030; stroke: #c03030; }
/* Paperclip action button – accent when note has attachment */
.note-actions .attachment-btn { color: var(--muted-text, #888); position: relative; }
.note-actions .attachment-btn.has-attachment i,
.note-actions .attachment-btn.has-attachment svg { color: var(--btn-accent, #f472b6); }
.attachment-badge {
    position: absolute;
    bottom: -4px;
    left: 62%;
    transform: translateX(-50%);
    background: var(--btn-accent, #f472b6);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 13px;
    height: 13px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    line-height: 1;
    pointer-events: none;
}

/* Paperclip badge on note title — driven by [data-has-attachments] attribute on the note card.
   Using ::after on .note-title avoids any DOM-child rendering issues entirely. */
.sticky-note[data-has-attachments="true"] .note-title::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C%2Fsvg%3E") center / contain no-repeat;
    opacity: 0.65;
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}



/* ===== WIDE-VIEW NOTE ACTIONS MENU (750/850/950px) ===== */

/* Timestamp row flex in tile views so ⋯ button aligns to the right;
   margin-top: auto pushes it to the bottom of the flex-column card so all
   timestamps sit at the same level regardless of content length. */
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .timestamp,
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .timestamp,
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .timestamp {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    overflow: visible;
    margin-top: auto;
    flex-shrink: 0; /* never let the timestamp row be squeezed away */
}

/* Allow note content to shrink below its natural height so the timestamp
   always remains visible at the bottom of each tile card. Without min-height: 0
   flex items refuse to shrink past their content size (the default is auto). */
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content,
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content,
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .sticky-note .note-content {
    min-height: 0;
}

/* ⋯ button: hidden by default, revealed in wide tile views */
.note-wide-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 4px;
    color: var(--muted-text, #888);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.note-wide-menu-btn:hover {
    color: var(--btn-accent, #f472b6);
    background: rgba(128, 128, 128, 0.08);
}

/* Mobile ⋮ more-actions button — hidden by default, enabled via the ≤520px media query */
.note-mobile-more-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--muted-text, #888);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.75;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}
@media (pointer: fine) {
    .note-mobile-more-btn:hover,
    .note-mobile-more-btn:active {
        color: var(--btn-accent, #f472b6);
        background: rgba(128, 128, 128, 0.08);
        opacity: 1;
    }
}
.container.container-size-750 #stickyNotesContainer:not(.collapsed-list-mode) .note-wide-menu-btn,
.container.container-size-850 #stickyNotesContainer:not(.collapsed-list-mode) .note-wide-menu-btn,
.container.container-size-950 #stickyNotesContainer:not(.collapsed-list-mode) .note-wide-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Touch/click shield — transparent full-screen layer below the ⋮ menu, blocks all background taps */
#wideMenuShield {
    position: fixed;
    inset: 0;
    z-index: 9991;
    background: transparent;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}
/* Folder filter dropdown shield — sits below the filter dropdown (z-index 100) */
#folderFilterShield {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}
/* Folder dropdown shield — same concept, sits below the folder menu (z-index 10000) */
#folderMenuShield {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: transparent;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}
/* Coloris picker shield — sits just below the picker (z-index 200000) to absorb outside clicks */
#colorisShield {
    position: fixed;
    inset: 0;
    z-index: 199999;
    background: transparent;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

/* Wide note menu dropdown */
.wide-note-menu {
    position: fixed;
    z-index: 9998;
    width: 210px;
    max-width: 92vw;
    background: var(--container-bg);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    padding: 5px 0;
    overflow-y: auto;
    max-height: 80vh;
    scrollbar-width: none;
}
.wide-note-menu::-webkit-scrollbar { display: none; }
.dark-mode .wide-note-menu {
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.wide-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color);
    transition: background 0.12s;
    user-select: none;
}
.wide-menu-item:hover { background: rgba(0, 0, 0, 0.04); }
.dark-mode .wide-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
/* Touch-slide highlight (applied by JS during finger swipe on mobile) */
.wide-menu-item.wide-menu-touch-active { background: rgba(0, 0, 0, 0.09); }
.dark-mode .wide-menu-item.wide-menu-touch-active { background: rgba(255, 255, 255, 0.11); }
.wide-menu-item.wide-menu-touch-active.wide-menu-danger { background: rgba(224, 85, 85, 0.12); }
.wide-menu-item.wide-menu-danger { color: #e05555; }
.wide-menu-item.wide-menu-danger:hover { background: rgba(224, 85, 85, 0.06); }
.dark-mode .wide-menu-item.wide-menu-danger:hover { background: rgba(224, 85, 85, 0.10); }
.wide-menu-icon {
    width: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-text, #888);
}
.wide-menu-item.wide-menu-danger .wide-menu-icon { color: #e05555; }
.wide-menu-icon i,
.wide-menu-icon svg { width: 15px; height: 15px; }
.wide-menu-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wide-menu-sublabel {
    font-size: 11px;
    color: var(--muted-text, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}
.wide-menu-badge {
    background: var(--btn-accent, #f472b6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
}
.wide-menu-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--muted-text, #888);
    flex-shrink: 0;
}
.wide-menu-chevron i,
.wide-menu-chevron svg { width: 13px; height: 13px; }
.wide-menu-separator {
    height: 1px;
    background: rgba(128, 128, 128, 0.18);
    margin: 3px 10px;
}

/* Mobile ⋮ menu spotlight: dim all notes, keep focused note vivid.
   Classes are only added by JS on mobile so no media query needed here. */
#stickyNotesContainer.wm-notes-dimmed .sticky-note {
    opacity: 0.22;
    filter: blur(1px);
    transition: opacity 0.2s ease, filter 0.2s ease;
    pointer-events: none;
}
#stickyNotesContainer.wm-notes-dimmed .sticky-note.wm-focus-note {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}
/* Scroll lock used by the mobile ⋮ menu */
body.wm-scroll-lock,
html:has(body.wm-scroll-lock) {
    overflow: hidden !important;
}

/* Tags in list view: hidden by default; shown only when 'Show tags on notes' setting is enabled */
#stickyNotesContainer .sticky-note .note-tags {
    display: none;
}
body.show-tags-on-notes #stickyNotesContainer .sticky-note .note-tags {
    display: flex;
    flex-wrap: wrap;
}
/* 950px view always hides tags regardless of setting */
.container.container-size-950 .sticky-note .note-tags {
    display: none !important;
}


.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--popup-overlay);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    will-change: auto;
    overflow: hidden;
    overscroll-behavior: contain;
}

/* Firebase auth popup should appear above settings popup */
#firebaseAuthPopup {
    z-index: 10000;
}

/* Help accordion */
.help-item {
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.help-item:last-child {
    border-bottom: none;
}
.help-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-color);
    user-select: none;
    gap: 10px;
}
.help-question:hover {
    color: var(--primary-color);
}
.help-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--primary-color);
}
.help-item.open .help-chevron {
    transform: rotate(90deg);
}
.help-answer {
    display: none;
    padding: 0 4px 12px 4px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-color);
}
.help-answer p { margin: 0; }
.help-item.open .help-answer {
    display: block;
}

/* Upgrade popup appears above everything including auth popup */
#upgradePopup {
    z-index: 10002;
}

.popup-content {
    background-color: var(--popup-bg);
    padding: 30px;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    position: relative;
    color: var(--text-color);
    will-change: transform, opacity;
    contain: layout style paint;
    overscroll-behavior: contain;
}

/* Ensure note title/content align inside popup: remove extra title padding there */
.popup-content .note-title {
    padding: 0; /* title shouldn't add extra left offset inside popup */
    margin: 0 0 10px 0;
    background: none; /* background color may be applied inline to match note, but default no padding */
    /* Match font weight of list view titles for visual parity */
    font-weight: 700;
}
.popup-content .note-content {
    margin: 0 0 10px 0;
}

/* ── Upgrade / Plan Comparison Popup ─────────────────────────── */
.upgrade-popup-content {
    max-width: 640px !important;
    width: 92% !important;
    padding: 28px 28px 24px !important;
}
.upgrade-columns {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.upgrade-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4px 20px 20px;
}
.upgrade-col-free {
    padding-left: 20px;
}
.upgrade-divider {
    width: 1px;
    background: var(--border-color);
    margin: 0 4px;
    flex-shrink: 0;
}
.upgrade-col-header {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.upgrade-plan-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
}
.upgrade-plan-premium {
    color: #f472b6;
}
.upgrade-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 14px;
}
.upgrade-price-premium {
    color: #f472b6;
}
.upgrade-price-sub {
    font-size: 13px;
    font-weight: 400;
    color: var(--muted-text);
}
.upgrade-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.upgrade-feature-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.3;
}
.upgrade-check-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--muted-text);
}
.upgrade-check-premium {
    color: #f472b6;
}
.upgrade-dim {
    color: var(--muted-text);
    font-size: 11px;
}
.upgrade-paypal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    padding: 11px 18px;
    background: #FFC439;
    color: #003087;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
    border: none;
}
.upgrade-paypal-btn:hover {
    background: #f0b429;
}
.upgrade-paypal-powered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 10px;
    color: var(--muted-text);
}
@media (max-width: 520px) {
    .upgrade-columns { flex-direction: column; }
    .upgrade-divider { width: 100%; height: 1px; margin: 12px 0; }
    .upgrade-col-free { padding-left: 20px; }
    .upgrade-popup-content { padding: 20px 16px 20px !important; }
}
/* ── end Upgrade popup ────────────────────────────────────────── */

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 25px;
    color: red;
    cursor: pointer;
}

.close-button:hover {
    color: darkred;
}

.settings-text {
    font-family: Calibri, sans-serif;
    font-size: 20px !important;
    color: #333;
    line-height: 1.5;
    margin: 10px 0;
    text-align: left;
}

#noteTitleInput {
    width: 100%;
    padding: 8px;
    margin-bottom: 5px;
    font-size: 14px; /* match search input */
    font-family: inherit; /* use same face as search */
    border: 1px solid rgba(0,0,0,0.12);
    background-color: var(--search-bg) !important;
    color: var(--search-text) !important;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Ensure placeholder color matches search input placeholder */
#noteTitleInput::placeholder { color: var(--muted-text); }
#noteTitleInput:focus { outline: none; border-color: rgba(0,0,0,0.28); box-shadow: none; }
.dark-mode #noteTitleInput:focus { border-color: rgba(255,255,255,0.22); }

.note-title {
    font-size: 1.2em; /* unified title size for list and popup */
    background-color: lightyellow;
    padding: 2px; /* Optional: adds padding to title */
    border-radius: 4px; /* Optional: rounded corners */
    border: 0px solid #ddd;
}

/* Quill editor contrast and WYSIWYG parity: ensure editor body uses note text color and inherits for children */
.ql-editor {
    color: var(--note-text-color);
    font-weight: 400;
    line-height: 1.35; /* match rendering spacing between lines */
    font-size: 14px; /* unify with search/title inputs */
    font-family: inherit;
}
/* Allow Quill to apply explicit inline colors (e.g., <span style="color: #f00">) in the editor.
   Avoid using !important here so inline styles from Quill take precedence. */
.ql-editor, .ql-editor * {
    color: inherit;
}

/* Font-size classes generated by the class-based size attributor (persist as classes and pass DOMPurify)
   Map them to concrete font-size values used throughout editor and rendered content. */
.ql-editor .ql-size-8px, .note-content .ql-size-8px, #popupNoteContent .ql-size-8px { font-size: 8px !important; }
.ql-editor .ql-size-9px, .note-content .ql-size-9px, #popupNoteContent .ql-size-9px { font-size: 9px !important; }
.ql-editor .ql-size-10px, .note-content .ql-size-10px, #popupNoteContent .ql-size-10px { font-size: 10px !important; }
.ql-editor .ql-size-11px, .note-content .ql-size-11px, #popupNoteContent .ql-size-11px { font-size: 11px !important; }
.ql-editor .ql-size-12px, .note-content .ql-size-12px, #popupNoteContent .ql-size-12px { font-size: 12px !important; }
.ql-editor .ql-size-14px, .note-content .ql-size-14px, #popupNoteContent .ql-size-14px { font-size: 14px !important; }
.ql-editor .ql-size-16px, .note-content .ql-size-16px, #popupNoteContent .ql-size-16px { font-size: 16px !important; }
.ql-editor .ql-size-18px, .note-content .ql-size-18px, #popupNoteContent .ql-size-18px { font-size: 18px !important; }
.ql-editor .ql-size-20px, .note-content .ql-size-20px, #popupNoteContent .ql-size-20px { font-size: 20px !important; }
.ql-editor .ql-size-24px, .note-content .ql-size-24px, #popupNoteContent .ql-size-24px { font-size: 24px !important; }
.ql-editor .ql-size-26px, .note-content .ql-size-26px, #popupNoteContent .ql-size-26px { font-size: 26px !important; }
.ql-editor .ql-size-28px, .note-content .ql-size-28px, #popupNoteContent .ql-size-28px { font-size: 28px !important; }
.ql-editor .ql-size-36px, .note-content .ql-size-36px, #popupNoteContent .ql-size-36px { font-size: 36px !important; }
.ql-editor .ql-size-48px, .note-content .ql-size-48px, #popupNoteContent .ql-size-48px { font-size: 48px !important; }
.ql-editor .ql-size-72px, .note-content .ql-size-72px, #popupNoteContent .ql-size-72px { font-size: 72px !important; }
/* Make editor paragraphs tighter so single-enter vs paragraph spacing matches display */
.ql-editor p,
.ql-editor li {
    margin: 0 0 0.5em;
}
.ql-editor p:last-child { margin-bottom: 0; }

/* ============================================
   CHECKLIST / TODO LIST STYLES
   ============================================ */

/* Quill 2 stores checklists as <ol><li data-list="checked"> / <li data-list="unchecked">
   Inside the editor, Quill renders its own .ql-ui pseudo-elements for the checkbox icons.
   Outside the editor (note tiles, popup view), we render our own checkboxes via ::before. */

/* Pull the parent <ol> left so checklist items aren't deeply indented.
   Only target lists that contain checked/unchecked items, NOT ordered/bullet lists. */
.note-content ol:has(> li[data-list="checked"]),
.note-content ol:has(> li[data-list="unchecked"]),
.sticky-note ol:has(> li[data-list="checked"]),
.sticky-note ol:has(> li[data-list="unchecked"]),
#popupNoteContent ol:has(> li[data-list="checked"]),
#popupNoteContent ol:has(> li[data-list="unchecked"]) {
    padding-left: 4px;
    margin-left: 0;
}

/* Ensure numbered and bullet lists have enough room for their markers */
.note-content ol:has(> li[data-list="ordered"]),
.sticky-note ol:has(> li[data-list="ordered"]),
#popupNoteContent ol:has(> li[data-list="ordered"]),
.note-content ol:has(> li[data-list="bullet"]),
.sticky-note ol:has(> li[data-list="bullet"]),
#popupNoteContent ol:has(> li[data-list="bullet"]) {
    padding-left: 1.8em;
    margin-left: 0;
}

/* Rendered note checklist items (tiles, popup, list view) */
.note-content li[data-list="checked"],
.note-content li[data-list="unchecked"],
.sticky-note li[data-list="checked"],
.sticky-note li[data-list="unchecked"],
#popupNoteContent li[data-list="checked"],
#popupNoteContent li[data-list="unchecked"] {
    position: relative;
    padding-left: 22px;
    margin-bottom: 4px;
    line-height: 1.4;
    list-style: none !important;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.15s ease;
}

/* Checkbox appearance - unchecked (rendered notes only) */
.note-content li[data-list="unchecked"]::before,
.sticky-note li[data-list="unchecked"]::before,
#popupNoteContent li[data-list="unchecked"]::before {
    content: '';
    position: absolute;
    left: 0;
    font-size: 12px; /* match checked::before so calc produces identical top offset */
    top: calc((1.4em - 14px) / 2); /* vertically centres checkbox with first text line */
    width: 14px;
    height: 14px;
    border: 2px solid var(--text-color);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    opacity: 0.55;
}

/* Checkbox appearance - checked (rendered notes only) */
.note-content li[data-list="checked"]::before,
.sticky-note li[data-list="checked"]::before,
#popupNoteContent li[data-list="checked"]::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: calc((1.4em - 14px) / 2); /* vertically centres checkbox with first text line */
    width: 14px;
    height: 14px;
    border: 2px solid var(--btn-accent, #4CAF50);
    border-radius: 3px;
    background: var(--btn-accent, #4CAF50);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

/* Strikethrough completed items */
.note-content li[data-list="checked"],
.sticky-note li[data-list="checked"],
#popupNoteContent li[data-list="checked"] {
    text-decoration: line-through;
    opacity: 0.6;
}
/* Clear inline background-color on child spans inside ALL checklist items (Quill wraps
   formatted text in <span style="background-color:..."> which overrides the note color) */
.note-content li[data-list="checked"],
.note-content li[data-list="unchecked"],
.sticky-note li[data-list="checked"],
.sticky-note li[data-list="unchecked"],
#popupNoteContent li[data-list="checked"],
#popupNoteContent li[data-list="unchecked"],
.note-content li[data-list="checked"] *,
.note-content li[data-list="unchecked"] *,
.sticky-note li[data-list="checked"] *,
.sticky-note li[data-list="unchecked"] *,
#popupNoteContent li[data-list="checked"] *,
#popupNoteContent li[data-list="unchecked"] * {
    background-color: transparent !important;
}

/* Dark mode adjustments */
.dark-mode .note-content li[data-list="unchecked"]::before,
.dark-mode .sticky-note li[data-list="unchecked"]::before,
.dark-mode #popupNoteContent li[data-list="unchecked"]::before {
    border-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}
.dark-mode .note-content li[data-list="checked"]::before,
.dark-mode .sticky-note li[data-list="checked"]::before,
.dark-mode #popupNoteContent li[data-list="checked"]::before {
    border-color: var(--btn-accent, #4CAF50);
    opacity: 1;
}

/* Hover effect for better interactivity */
.note-content li[data-list="checked"]:hover::before,
.note-content li[data-list="unchecked"]:hover::before,
.sticky-note li[data-list="checked"]:hover::before,
.sticky-note li[data-list="unchecked"]:hover::before,
#popupNoteContent li[data-list="checked"]:hover::before,
#popupNoteContent li[data-list="unchecked"]:hover::before {
    opacity: 1;
    transition: opacity 0.15s ease;
}


/* Editor-mode checklist: scale up the .ql-ui pseudo-element (Quill Snow renders
   ballot-box Unicode chars via ::before on .ql-ui — font-size controls their visual size) */
.ql-editor li[data-list="checked"] > .ql-ui,
.ql-editor li[data-list="unchecked"] > .ql-ui {
    font-size: 1.4em;
    line-height: 1;
    vertical-align: middle;
}

/* ── Editor-mode checklist: indentation + custom checkbox appearance ─────
   Quill Snow's default CSS sets padding-left:1.5em on every <ol>, which
   pushes checklist items rightward. Reset it for checklist-only lists. */
.ql-editor ol:has(> li[data-list="checked"]),
.ql-editor ol:has(> li[data-list="unchecked"]) {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Replace Quill's Unicode ballot-box glyphs with a clean CSS checkbox.
   We suppress Quill's ::before glyph and the .ql-ui element itself,
   then use a proper ::before box drawn entirely with CSS. */
.ql-editor li[data-list="checked"] > .ql-ui::before,
.ql-editor li[data-list="unchecked"] > .ql-ui::before {
    content: '' !important;    /* hide Quill's ☐ / ☑ glyph */
}
.ql-editor li[data-list="unchecked"] > .ql-ui,
.ql-editor li[data-list="checked"] > .ql-ui {
    /* Turn .ql-ui into the checkbox box itself */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    border-radius: 3px !important;
    vertical-align: middle !important;
    font-size: 0 !important;        /* hide any residual glyph */
    position: relative;
    top: -1px;
    margin-right: 6px !important;
    flex-shrink: 0;
}
/* Unchecked state */
.ql-editor li[data-list="unchecked"] > .ql-ui {
    border: 2px solid rgba(0,0,0,0.35) !important;
    background: transparent !important;
}
/* Checked state: accent fill + checkmark via ::after */
.ql-editor li[data-list="checked"] > .ql-ui {
    border: 2px solid var(--btn-accent, #4CAF50) !important;
    background: var(--btn-accent, #4CAF50) !important;
}
.ql-editor li[data-list="checked"] > .ql-ui::after {
    content: '';
    display: block;
    width: 4px;
    height: 7px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
}
/* Dark mode: unchecked border */
.dark-mode .ql-editor li[data-list="unchecked"] > .ql-ui {
    border-color: rgba(255,255,255,0.45) !important;
}

.ql-editor.ql-blank::before {
    color: var(--muted-text);
    opacity: 1; /* ensure visibility */
    font-style: normal !important; /* remove Quill's default italics for placeholder */
}
.dark-mode .ql-editor.ql-blank::before {
    color: var(--search-text);
}

/* Rendered notes (popup & tiles) should match editor spacing for true WYSIWYG */
.note-content,
.popup-content .note-content,
.sticky-note .note-content,
#popupNoteContent {
    line-height: 1.35;
}

/* Popup-specific override: make popup note view more airy to match editor replayed feel */
.popup-content .note-content,
#popupNoteContent {
    line-height: 1.45 !important; /* slightly more airy in popup */
    font-size: 15px !important; /* match editor text size */
}

.popup-content .note-content p,
#popupNoteContent p {
    margin: 0 0 0.44em !important; /* more breathing room in popup */
}

/* Tighten heading spacing so headings inside editor and rendered notes match the editor view
   and eliminate excessive gap above headings (e.g., 'Deep Abundantly...') */
.ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    margin: 0 0 0.2em;
    line-height: 1.15;
}

/* If a heading follows a paragraph in the editor, remove top spacing so it sits tight */
.ql-editor p + h1, .ql-editor p + h2, .ql-editor p + h3, .ql-editor p + h4, .ql-editor p + h5, .ql-editor p + h6 {
    margin-top: 0;
}

.note-content h1, .note-content h2, .note-content h3, .note-content h4, .note-content h5, .note-content h6,
.popup-content .note-content h1, .popup-content .note-content h2, .popup-content .note-content h3 {
    margin: 0 0 0.2em;
    line-height: 1.15;
}

/* Remove top margin when heading follows paragraph in rendered notes */
.note-content p + h1, .note-content p + h2, .note-content p + h3, .note-content p + h4, .note-content p + h5, .note-content p + h6,
.popup-content .note-content p + h1, .popup-content .note-content p + h2, .popup-content .note-content p + h3 {
    margin-top: 0;
}

/* Slightly tighten paragraph bottom margin to bring lines closer to headings */
.ql-editor p, .ql-editor li { margin: 0 0 0.34em; }
.ql-editor p:last-child { margin-bottom: 0; }

.note-content p, .popup-content .note-content p, .sticky-note .note-content p { margin: 0 0 0.36em; }
.note-content p:last-child, .popup-content .note-content p:last-child, .sticky-note .note-content p:last-child { margin-bottom: 0; }

/* Additional resets to eliminate large gaps regardless of markup Quill produced */
/* Remove default heading top margins and ensure headings are compact inside notes */
.note-content h1, .note-content h2, .note-content h3, .note-content h4, .note-content h5, .note-content h6,
.popup-content .note-content h1, .popup-content .note-content h2, .popup-content .note-content h3 {
    margin: 0 0 0.22em !important;
    line-height: 1.15 !important;
}
/* If headings were created as bold paragraphs (Quill sometimes does), remove extra gap when preceded by a paragraph */
.note-content p + p {
    margin-top: 0 !important;
}
/* Hide empty paragraphs that may be inserted as spacing placeholders */
.note-content p:empty, #popupNoteContent p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
/* Normalize horizontal rules that might introduce large gaps */
.note-content hr, #popupNoteContent hr {
    margin: 0.3em 0 !important;
    border: none !important;
    height: 1px !important;
    background-color: rgba(0,0,0,0.06) !important;
}

.note-content p,
.popup-content .note-content p,
.sticky-note .note-content p,
#popupNoteContent p {
    margin: 0 0 0.34em;
}

.note-content p:last-child,
.popup-content .note-content p:last-child,
.sticky-note .note-content p:last-child,
#popupNoteContent p:last-child {
    margin-bottom: 0;
}

/* Compact empty paragraph placeholders: hide in rendered notes (popup/tiles) but keep visible in editor */
.note-content p.empty-paragraph,
#popupNoteContent p.empty-paragraph {
    display: none !important; /* remove visual gap in rendered views */
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
.ql-editor p.empty-paragraph {
    margin: 0 0 0.24em !important;
    line-height: 1 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.note-title h4 {
    margin: 0; /* Remove default margin */
    font-size: inherit;
    line-height: 2; /* Adjust as needed */
}

.note-content {
    font-family: inherit;
    font-size: inherit;
    margin-bottom: 5px; /* Adds space between note content and actions */
    border: 0px solid #ddd;
}

/* Blur/hide note content when requested via View toggle */
.note-content.blurred {
    filter: blur(6px);
    opacity: 0.95;
    pointer-events: none;
    transition: filter 180ms ease, opacity 180ms ease;
}

/* Ensure blur applies to all children (images, embeds) and can't be accidentally overridden */
.note-content.blurred, .note-content.blurred * {
    filter: blur(6px) !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
}

/* Blur the title along with content when hidden */
.note-title.blurred {
    filter: blur(6px);
    opacity: 0.95;
    pointer-events: none;
    transition: filter 180ms ease, opacity 180ms ease;
}

/* Ensure blurred sections inside the popup do not create a stacking context that visually blurs the close button.
   Give blurred elements a lower z-index than the close button so the close control remains clear and tappable. */
.popup-content .note-content.blurred,
.popup-content .note-title.blurred,
.popup-content .timestamp.blurred,
.popup-content .note-tags.blurred {
    position: relative; /* create local stacking but allow z-index
                         to be applied */
    z-index: 1;
}
.popup .close-button {
    z-index: 10020 !important;
}

/* Image lightbox */
.image-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 11000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.image-lightbox .lightbox-content {
    max-width: 96vw;
    max-height: 96vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.image-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.image-lightbox .close-button {
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 28px;
    background: #fff;
    color: #e11;
    border-radius: 20px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Blur the timestamp when note is hidden */
.timestamp.blurred {
    filter: blur(6px);
    opacity: 0.95;
    pointer-events: none;
    transition: filter 180ms ease, opacity 180ms ease;
}

.note-actions {
    display: flex;
    gap: 2px; /* tightened spacing between action icons */
    justify-content: flex-end; /* Align icons to the left */
    border-top: 0px solid #ddd; /* Optional: Divider between content and actions */
    padding-top: 5px;
    padding-bottom: 2px;
}

/* Override browser autofill (yellow) for the title and search inputs */
#noteTitleInput:-webkit-autofill,
#noteTitleInput:-webkit-autofill:focus,
#noteTitleInput:-webkit-autofill:hover,
#searchInput:-webkit-autofill,
#searchInput:-webkit-autofill:focus,
#searchInput:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0px 1000px var(--search-bg) inset !important;
    box-shadow: 0 0 0px 1000px var(--search-bg) inset !important;
    -webkit-text-fill-color: var(--search-text) !important;
}

/* Firefox autofill override */
input:-moz-autofill,
input:-moz-autofill:focus,
input:-moz-autofill:hover {
    box-shadow: 0 0 0px 1000px var(--search-bg) inset !important;
    -moz-text-fill-color: var(--search-text) !important;
}

/* Extra coverage for some Chromium variants and internal autofill pseudo-classes */
#noteTitleInput:-internal-autofill-selected,
#searchInput:-internal-autofill-selected,
#noteTitleInput:-webkit-autofill:autofill,
#searchInput:-webkit-autofill:autofill {
    background-color: var(--search-bg) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--search-bg) inset !important;
    box-shadow: 0 0 0px 1000px var(--search-bg) inset !important;
    -webkit-text-fill-color: var(--search-text) !important;
    background-clip: content-box !important;
}

/* Ensure inputs keep our theme background in all states */
#noteTitleInput,
#searchInput {
    background-color: var(--search-bg) !important;
    color: var(--search-text) !important;
    background-clip: padding-box !important;
}

.note-actions button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

.note-actions button i,
.note-actions button svg.lucide {
    font-size: 18px; /* slightly larger icons */
    color: var(--icon-color);
}

.note-actions button:hover i,
.note-actions button:hover svg.lucide {
    color: var(--btn-accent, #ff5858);
}

/* Universal slightly lighter grey for note action icons (list + popup, light + dark)
   - Slightly lighter than previous dark-grey but still readable on pastel notes
   - Applied with high specificity to ensure consistency; can be reverted easily */
.note-actions button i,
.note-actions button svg.lucide,
.sticky-note .note-actions button i,
.sticky-note .note-actions button svg.lucide,
.popup .note-actions button i,
.popup .note-actions button svg.lucide,
.popup-content .note-actions button i,
.popup-content .note-actions button svg.lucide {
    color: var(--icon-color) !important;
}

/* Hover clarity for all note actions */
.note-actions button:hover i,
.note-actions button:hover svg.lucide,
.sticky-note .note-actions button:hover i,
.sticky-note .note-actions button:hover svg.lucide,
.popup .note-actions button:hover i,
.popup .note-actions button:hover svg.lucide,
.popup-content .note-actions button:hover i,
.popup-content .note-actions button:hover svg.lucide {
    color: var(--btn-accent, #ff5858) !important; /* match New Note hover accent */
}

/* Stronger contrast for action icons placed on pastel/sticky-note backgrounds */
.sticky-note .note-actions button i,
.sticky-note .note-actions button svg.lucide {
    color: var(--icon-color) !important;
}
.dark-mode .sticky-note .note-actions button i,
.dark-mode .sticky-note .note-actions button svg.lucide {
    color: var(--icon-color) !important;
}

/* Slightly stronger hover state inside notes for clarity */
.sticky-note .note-actions button:hover i,
.sticky-note .note-actions button:hover svg.lucide {
    color: var(--btn-accent, #ff5858); /* match New Note hover accent */
}

/* Color palette for per-note color selection */
.color-palette {
    position: absolute;
    top: 36px;
    left: 0; /* positioned by JS; use left/top to place */
    right: auto;
    display: inline-flex; /* shrink-wrap to content */
    gap: 8px;
    padding: 6px;
    background: rgba(255,255,255,0.95);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    z-index: 10;
    white-space: nowrap;
}
.color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.12);
    cursor: pointer;
}

/* Coloris color picker overrides for proper layering and positioning */
.clr-picker {
    z-index: 200000 !important; /* above all modals/popups including note popup */
    position: fixed !important; /* escape any stacking context */
    /* Center on screen using calc - avoid transform which conflicts with marker */
    top: calc(50% - 150px) !important;
    left: calc(50% - 130px) !important;
}
/* Hidden input for Coloris - visually hidden */
.coloris-hidden-input {
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
}
/* Hide Coloris wrapper for hidden input */
#colorisInputWrapper {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 1px !important;
    height: 1px !important;
    overflow: visible;
}
/* Ensure swatches in Coloris are touch-friendly on mobile */
@media (max-width: 600px) {
    .clr-picker {
        max-width: 90vw;
    }
    .clr-swatches button {
        min-width: 28px;
        min-height: 28px;
    }
}

/* Quill toolbar and picker: use Quill's default theme (quill.snow.css).
   Custom overrides removed to avoid conflicts; if theme adjustments
   are needed, add minimal, targeted rules instead of broad overrides. */

/* Dark-mode: increase toolbar contrast and ensure pickers/buttons are readable */
.dark-mode #toolbar, .dark-mode .ql-toolbar {
    background: rgba(255,255,255,0.02); /* subtle elevated surface */
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-color);
    border-radius: 6px;
}
.dark-mode #toolbar .ql-picker-label,
.dark-mode #toolbar button,
.dark-mode #toolbar select,
.dark-mode #toolbar .ql-picker {
    color: var(--text-color);
    background: transparent;
    border-color: rgba(255,255,255,0.04);
}

/* Fix Quill's icon visibility in dark mode - make them as visible as the location pin */
.dark-mode #toolbar .ql-stroke,
.dark-mode .ql-toolbar .ql-stroke {
    stroke: var(--text-color) !important;
    stroke-opacity: 1 !important;
}

.dark-mode #toolbar .ql-fill,
.dark-mode .ql-toolbar .ql-fill {
    fill: var(--text-color) !important;
    fill-opacity: 1 !important;
}

.dark-mode #toolbar .ql-picker-label .ql-stroke,
.dark-mode .ql-toolbar .ql-picker-label .ql-stroke {
    stroke: var(--text-color) !important;
}

/* Hover states for better feedback */
.dark-mode #toolbar button:hover .ql-stroke,
.dark-mode .ql-toolbar button:hover .ql-stroke {
    stroke: var(--btn-accent, #ff5858) !important;
}

.dark-mode #toolbar button:hover .ql-fill,
.dark-mode .ql-toolbar button:hover .ql-fill {
    fill: var(--btn-accent, #ff5858) !important;
}

.dark-mode #toolbar button i,
.dark-mode .ql-toolbar button i {
    color: var(--text-color);
    opacity: 0.95;
}
.dark-mode #toolbar button:hover i,
.dark-mode .ql-toolbar button:hover i,
.dark-mode #toolbar .ql-picker.ql-expanded .ql-picker-label {
    color: var(--btn-accent, #ff5858);
}
.dark-mode .ql-picker .ql-picker-options {
    background: var(--popup-bg);
    color: var(--text-color);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* Narrow the font-size picker — Quill default (~98px) is too wide for a 2-digit number */
#toolbar .ql-size,
.ql-toolbar .ql-size {
    width: 52px !important;
}

/* Make the font-size select and color swatches more visible in dark theme */
.dark-mode #toolbar .ql-size,
.dark-mode #toolbar .ql-font {
    color: var(--text-color);
}

/* Fix: ensure Quill picker items remain visible when site rules set
   -webkit-text-fill-color: transparent (background-clip hacks). */
.ql-picker .ql-picker-item,
.ql-picker .ql-picker-item * {
    /* Allow Quill to render picker item previews (inline backgrounds).
       Clear clipped-text hacks but do not force color/background here. */
    -webkit-text-fill-color: unset !important;
}

/* Prevent font picker labels & items from wrapping so long font names
   (eg. "Times New Roman") don't break onto multiple lines. Allow the
   options panel to grow to fit content while keeping usable fallbacks. */
.ql-picker .ql-picker-item,
.ql-picker .ql-picker-item *,
.ql-picker .ql-picker-label,
.ql-font + .ql-picker-label {
    white-space: nowrap;
}
.ql-picker .ql-picker-options {
    /* Let the options panel expand to fit its content; fall back to auto width
       and allow horizontal scrolling if necessary on narrow screens. */
    white-space: nowrap;
    min-width: max-content;
    width: auto;
    overflow-x: auto;
    box-sizing: border-box;
    /* Don't allow the options panel to grow beyond the viewport — keep it
       usable on narrow screens and avoid UI overlap with neighboring controls. */
    max-width: calc(100vw - 48px);
}

/* Layout and truncation rules to keep toolbar controls from overlapping. */
#toolbar, .ql-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap; /* prefer a single-line toolbar where possible */
    width: 100%;
    box-sizing: border-box;
}
#toolbar select, #toolbar .ql-picker, #toolbar button {
    flex: 0 0 auto; /* don't let a single control grow and push others */
}

/* Custom map button styling */
#toolbar button.ql-map svg,
.ql-toolbar button.ql-map svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

#toolbar button.ql-map:hover svg,
.ql-toolbar button.ql-map:hover svg {
    opacity: 0.8;
}

/* Custom note-color (palette) button styling */
#toolbar button.ql-notecolor svg,
.ql-toolbar button.ql-notecolor svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

#toolbar button.ql-notecolor:hover svg,
.ql-toolbar button.ql-notecolor:hover svg {
    opacity: 0.8;
}

/* Clamp the visible picker label so long font names truncate with ellipsis
   instead of overflowing into adjacent controls like the size dropdown. */
.ql-picker .ql-picker-label,
.ql-font + .ql-picker-label {
    display: inline-block;
    max-width: 140px; /* reasonable default; helps keep layout stable */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Small screens: allow toolbar to wrap and make labels use available width */
@media (max-width: 520px) {
    #toolbar, .ql-toolbar { flex-wrap: wrap; gap: 8px; }
    .ql-picker .ql-picker-label,
    .ql-font + .ql-picker-label {
        max-width: 100%;
    }
}



/* smaller palette on narrow screens */
/* smaller palette on narrow screens: cap width and center the popover so it doesn't span full width */
@media (max-width: 520px) {
    .color-palette {
        top: 40px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        gap: 6px;
        padding: 6px 8px;
        max-width: calc(100% - 40px);
        box-sizing: border-box;
        border-radius: 10px;
        white-space: nowrap;
    }
    .color-swatch { width:18px; height:18px; }
}

.favorite-icon.fas {
    color: red; /* Solid red when favorited */
}

.star-icon.fas {
    color: gold; /* Yellow color for starred items */
}

#favoriteFilterIcon.fas {
    color: red;  /* Red color when active */
}

#starredFilterIcon.fas {
    color: gold;  /* Gold color when active */
}

/* Ensure toggled favorite/star icons keep their intended colors despite
   the universal icon color overrides above. Higher specificity + !important
   guarantees red/gold when the icon is toggled. */
.note-actions .favorite-icon.fas,
.note-actions .favorite-active i,
.sticky-note .note-actions .favorite-icon.fas,
.popup .note-actions .favorite-icon.fas,
.popup-content .note-actions .favorite-icon.fas {
    color: var(--fav-color) !important;
}
.note-actions .star-icon.fas,
.note-actions .star-active i,
.sticky-note .note-actions .star-icon.fas,
.popup .note-actions .star-icon.fas,
.popup-content .note-actions .star-icon.fas {
    color: var(--star-color) !important;
}

/* Lucide filled heart/star icons (using fill="currentColor" attribute) */
.note-actions svg.lucide[fill="currentColor"],
.sticky-note .note-actions svg.lucide[fill="currentColor"],
.popup .note-actions svg.lucide[fill="currentColor"],
.popup-content .note-actions svg.lucide[fill="currentColor"] {
    stroke: currentColor;
}

/* Heart icon - red when filled */
.note-actions svg.lucide-heart[fill="currentColor"],
.sticky-note .note-actions svg.lucide-heart[fill="currentColor"],
.popup .note-actions svg.lucide-heart[fill="currentColor"],
.popup-content .note-actions svg.lucide-heart[fill="currentColor"] {
    color: var(--fav-color) !important;
    fill: var(--fav-color) !important;
    stroke: var(--fav-color) !important;
}

/* Star icon - gold when filled */
.note-actions svg.lucide-star[fill="currentColor"],
.sticky-note .note-actions svg.lucide-star[fill="currentColor"],
.popup .note-actions svg.lucide-star[fill="currentColor"],
.popup-content .note-actions svg.lucide-star[fill="currentColor"] {
    color: var(--star-color) !important;
    fill: var(--star-color) !important;
    stroke: var(--star-color) !important;
}


.tab-headers {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.tab-button {
    font-family: 'Unica One';
    font-size: 16px;
    padding: 10px 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    border-bottom: 2px solid transparent;
}

.tab-button.active {
    color: #007bff;
    border-bottom-color: #007bff;
}

.tab-button:hover {
    color: #007bff;
}

/* Dark-mode: improve readability of Settings tab labels */
.dark-mode .tab-button {
    color: #e6e6e6; /* light neutral for good contrast */
}
.dark-mode .tab-button.active {
    color: #8fd6ff; /* slightly brighter accent for active tab */
    border-bottom-color: #8fd6ff;
}
.dark-mode .tab-button:hover {
    color: #bfeeff;
}

/* Mobile: make tab underline straight (remove rounded caps) to match desktop */
@media (max-width: 520px) {
    #settingsPopup .tab-button {
        border-radius: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #settingsPopup .tab-headers {
        border-bottom: 1px solid #ddd !important;
    }
    #settingsPopup .tab-button {
        /* ensure the underline is a simple solid line without shadow */
        box-shadow: none !important;
        border-bottom-width: 2px !important;
        border-bottom-style: solid !important;
    }
    #settingsPopup .tab-button.active {
        border-bottom-color: #007bff !important;
    }
}

/* Dark-mode: increase contrast for the Settings (cog) icon only */
.dark-mode .settings-icon {
    color: rgba(255,255,255,0.88);
}
.dark-mode .settings-icon:hover {
    color: #bfeeff;
}

/* More specific selector to override header-icon default color in dark mode */
.dark-mode .header-actions .settings-icon {
    color: rgba(255,255,255,0.88);
}
.dark-mode .header-actions .settings-icon:hover {
    color: #bfeeff;
}

.tab-content {
    display: none; /* Only the active tab's content will be displayed */
}

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

/* Editor buttons wrapper: left-aligned, natural-width buttons */
.editor-buttons .editor-btn {
    /* Override .input-section button which forces width:100% and wrong font/padding */
    font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.750rem !important;
    padding: 6px 14px !important;
    width: auto !important;
    max-width: none !important;
    height: 32px;
    flex-shrink: 0;
}

/* Apply the same readable action-icon color inside the popup (theme-aware) */
.popup .note-actions button i,
.popup .note-actions button svg.lucide,
.popup-content .note-actions button i,
.popup-content .note-actions button svg.lucide {
    color: var(--icon-color) !important;
}

/* Dark-mode uses the same --icon-color variable so no separate rule required */

/* Hover clarity inside popup */
.popup .note-actions button:hover i,
.popup .note-actions button:hover svg.lucide,
.popup-content .note-actions button:hover i,
.popup-content .note-actions button:hover svg.lucide {
    color: var(--btn-accent, #004494);
}

/* Ensure dark-mode hover color is applied for all note actions (list + popup) */
.dark-mode .note-actions button:hover i,
.dark-mode .note-actions button:hover svg.lucide,
.dark-mode .sticky-note .note-actions button:hover i,
.dark-mode .sticky-note .note-actions button:hover svg.lucide,
.dark-mode .popup .note-actions button:hover i,
.dark-mode .popup .note-actions button:hover svg.lucide,
.dark-mode .popup-content .note-actions button:hover i,
.dark-mode .popup-content .note-actions button:hover svg.lucide,
.dark-mode .note-actions .expand-btn:hover i,
.dark-mode .note-actions .expand-btn:hover svg.lucide {
    color: var(--btn-accent, #ff5858) !important; /* force New Note accent on hover in dark mode too */
}

/* Use a gradient hover for note action icons that matches #newNoteButton.
   Applies to list and popup, light and dark. Uses background-clip text with
   a solid fallback for browsers that don't support it. */
.note-actions button:hover i,
.note-actions button:hover svg.lucide,
.sticky-note .note-actions button:hover i,
.sticky-note .note-actions button:hover svg.lucide,
.popup .note-actions button:hover i,
.popup .note-actions button:hover svg.lucide,
.popup-content .note-actions button:hover i,
.popup-content .note-actions button:hover svg.lucide,
.note-actions .expand-btn:hover i,
.note-actions .expand-btn:hover svg.lucide {
    background: var(--btn-gradient, linear-gradient(90deg, #f857a6 0%, #ff5858 100%)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--btn-accent, #ff5858) !important; /* fallback for non-supporting browsers */
}

/* On touch devices, disable hover styles so a tap doesn't leave a persistent
   hover/focus color on icons. Keep keyboard focus intact for accessibility. */
@media (hover: none), (pointer: coarse) {
    .note-actions button:hover i,
    .note-actions button:hover svg.lucide,
    .sticky-note .note-actions button:hover i,
    .sticky-note .note-actions button:hover svg.lucide,
    .popup .note-actions button:hover i,
    .popup .note-actions button:hover svg.lucide,
    .popup-content .note-actions button:hover i,
    .popup-content .note-actions button:hover svg.lucide,
    .note-actions .expand-btn:hover i,
    .note-actions .expand-btn:hover svg.lucide {
        /* revert to the default icon color on touch devices */
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
        color: var(--icon-color) !important;
    }

    /* Ensure focus from touch doesn't lock color; keyboard focus still works */
    .note-actions button:focus i,
    .note-actions button:focus svg.lucide,
    .note-actions button:active i,
    .note-actions button:active svg.lucide {
        color: var(--icon-color) !important;
    }
}




/* Final override: ensure Settings popup is 500px tall on desktop viewports.
   Placed at the end to win the cascade against earlier generic rules or inline styles. */
@media (min-width: 521px) {
    /* high-specificity selector to override inline popup styles on desktop */
    html body #settingsPopup.popup .popup-content,
    html body #settingsPopup .popup-content {
        height: 80vh !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Restore top padding so header sits comfortably below the popup top */
    html body #settingsPopup .popup-content {
        padding-top: 18px !important;
    }
    html body #settingsPopup .popup-content h1 {
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        font-size: 20px;
    }
}

/* Disable background scrolling while modal/popups are open.
   Uses position:fixed on body (with top:-scrollY) so the page stays visually
   in place and window.scrollY is preserved. Scroll is restored by _unlockBodyScroll(). */
body.modal-open {
    position: fixed;
    width: 100%;
    overflow-y: scroll; /* preserve scrollbar width to prevent layout shift */
}

/* Heartbeat animation used in About footer */
.heartbeat {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    width: 16px;
    height: 16px;
    fill: rgb(225, 61, 61);
    stroke: rgb(225, 61, 61);
    transform-origin: center center;
    animation: heartbeat 1.2s ease-in-out infinite;
}

/* Wallpaper view: animate hiding main UI but keep header and background visible.
/* When wallpaper view is active we hide the UI immediately (no animation).
   Keep the header-actions area visible so the close control can be shown. */
.container .input-section,
.container .search-and-filters,
.container .filter-chips,
.container #stickyNotesContainer,
.container #paginationControls,
.container .header-actions #themeToggle {
    transition: none !important;
}
/* Wallpaper view: expand the container to fill the viewport height while keeping
   its normal width, border-radius, margin and shadow intact.
   background-size:contain ensures the full image is visible (letterboxed) at any
   aspect ratio. The letterbox background-color is #111 for both light and dark modes. */
.container.wallpaper-view {
    min-height: calc(100vh - 60px) !important;
    height: calc(100vh - 60px) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #111 !important;
    overflow: visible !important;
}

/* Mobile: use dvh so wallpaper fits inside the dynamic viewport (browser chrome) */
@media (max-width: 520px) {
    .container.wallpaper-view {
        min-height: calc(100dvh - 12px) !important;
        height: calc(100dvh - 12px) !important;
        margin: 6px auto !important;
    }
}

.container.wallpaper-view .input-section,
.container.wallpaper-view .search-and-filters,
.container.wallpaper-view .filter-chips,
.container.wallpaper-view #stickyNotesContainer,
.container.wallpaper-view #paginationControls,
.container.wallpaper-view .header-actions #themeToggle,
.container.wallpaper-view .header-actions #weatherToggle {
    display: none;
    pointer-events: none;
    visibility: hidden;
}
.container.wallpaper-view .input-section-row .header-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    /* keep header actions area so we can replace settings with close */
}
.container.wallpaper-view .input-section-row .input-section {
    display: none !important;
}
/* Close button pinned to top-right of wallpaper-view container */
.container.wallpaper-view > .header-close {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 10;
}
/* Hide settings icon in wallpaper view */
.container.wallpaper-view .settings-icon {
    display: none !important;
}

/* Full hide: hide everything inside container, keep only wallpaper background */
.container.ui-hidden-all > * {
    display: none !important;
}

/* Close button style to match header icon sizing */
.header-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}
.header-close i { font-size: 18px; }

/* When in dark mode, make close button adapt */
.dark-mode .header-close { background: rgba(255,255,255,0.04); color: #fff; }
.header-close { background: rgba(0,0,0,0.02); color: #222; }

/* Ensure close button is visible against wallpaper backgrounds (light theme)
   Use a semi-opaque dark background while in wallpaper-view so it contrasts
   regardless of the wallpaper brightness. */
.container.wallpaper-view .header-close {
    background: rgba(0,0,0,0.36) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
}
.container.wallpaper-view .header-close:hover { background: rgba(200,0,0,0.72) !important; }
.container.wallpaper-view .header-close:hover i { color: #fff !important; }
.container.wallpaper-view .header-close i { color: #fff !important; }

/* Prevent touch gesture interference on header icons; improves long-press reliability */
.header-actions .header-icon,
.header-actions .header-close {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* Ensure weather and wallpaper toggles are always interactive */
#weatherToggle,
#wallpaperToggle {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Wallpaper header icon: hidden by default, shown via class when background is enabled */
#wallpaperToggle { display: none; }
html.show-wallpaper-icon #wallpaperToggle { display: inline; }

/* PIN input styling */
.pin-inputs { display: inline-flex; gap: 8px; }
.pin-inputs .pin-digit,
.pin-digit {
    width: 40px; height: 40px; border-radius: 8px; text-align: center; font-size: 18px; line-height: 40px;
    border: 1px solid rgba(0,0,0,0.12); background: var(--container-bg); color: var(--text-color);
    display: flex; align-items: center; justify-content: center;
}
.pin-inputs .pin-digit:focus,
.pin-digit:focus { outline: none; box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.popup .pin-digit { width: 40px; height: 40px; }
.pin-error { color: var(--danger-color); font-size: 12px; margin-left:8px; }

/* Improve contrast for PIN inputs in dark mode (popup and settings) */
.dark-mode .pin-inputs .pin-digit,
.dark-mode .pin-digit {
    border: 1px solid rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.03);
    color: var(--text-color);
    box-shadow: 0 2px 6px rgba(255,255,255,0.03) inset;
}
.dark-mode .popup .pin-digit {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* Visual for masked PIN inputs in settings/popup */
.pin-digit.masked {
    color: var(--muted-text);
    font-size: 22px;
    line-height: 40px; /* vertically center the symbol */
    text-align: center;
    letter-spacing: 0;
}
.dark-mode .pin-digit.masked { color: rgba(255,255,255,0.65); }

/* Ensure PIN verification popups appear above the Settings popup */
#pinPromptPopup.popup, #pinRequiredPopup.popup {
    z-index: 11000;
}

#conflictResolutionPopup.popup {
    z-index: 11001;
}

#conflictResolutionPopup .popup-content {
    animation: fadeInScale 0.2s ease-out;
}

/* Conflict preview notes - use note tile styling but with borders */
.conflict-preview-note {
    text-align: left;
    cursor: pointer !important; /* Make it clear they're clickable */
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    user-select: none;
}

.conflict-preview-note:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 1.5px 0 #e2c275 !important;
}

.conflict-preview-note:active {
    transform: scale(0.98) translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1.5px 0 #e2c275 !important;
    transition: transform 0.05s ease;
}

#conflictCurrentNote {
    border: 3px solid #4CAF50;
}

#conflictCurrentNote:hover {
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3), 0 1.5px 0 #4CAF50 !important;
}

#conflictImportedNote {
    border: 3px solid #2196F3;
}

#conflictImportedNote:hover {
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3), 0 1.5px 0 #2196F3 !important;
}

/* Ensure images in conflict previews are properly sized */
.conflict-preview-note img {
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    display: block;
    margin: 8px auto;
    object-fit: contain;
    border-radius: 4px;
}

/* Also apply to content within conflict notes */
.conflict-note-content img {
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    display: block;
    margin: 8px auto;
    object-fit: contain;
    border-radius: 4px;
}

.conflict-preview-note:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1.5px 0 #e2c275;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heartbeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.15); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.1); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* Ensure remote images inserted into the editor don't overflow the editor area */
.ql-editor img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
}




/* Collapse-all list view: show only the title for each note when activated */
.sticky-note.collapse-list-view .note-content,
.sticky-note.collapse-list-view .note-actions,
.sticky-note.collapse-list-view .timestamp,
.sticky-note.collapse-list-view .note-attachment-row {
    display: none !important;
}
.sticky-note.collapse-list-view {
    cursor: pointer;
    /* keep left/right padding consistent with expanded notes so title aligns with body */
    padding: 10px 18px; /* top/bottom 10px, left/right 18px (matches .sticky-note default) */
    /* make the collapsed card more compact and vertically center the title */
    min-height: 56px;
    display: flex;
    align-items: center;
}
.sticky-note.collapse-list-view:not(.custom-color) {
    /* give collapsed notes a subtle elevated shadow to match other cards; per-variant rim overrides follow */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1.5px 0 #e2c275 !important;
}
.sticky-note.collapse-list-view:not(.custom-color):hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 1.5px 0 #e2c275 !important;
    z-index: 1;
}

/* Per-variant colored rim for collapsed notes (match expanded variants) */
.sticky-note.collapse-list-view:not(.custom-color):nth-child(2n) {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1.5px 0 #7ec6e2 !important;
}
.sticky-note.collapse-list-view:not(.custom-color):nth-child(2n):hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 1.5px 0 #7ec6e2 !important;
}
.sticky-note.collapse-list-view:not(.custom-color):nth-child(3n) {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1.5px 0 #e27ec6 !important;
}
.sticky-note.collapse-list-view:not(.custom-color):nth-child(3n):hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 1.5px 0 #e27ec6 !important;
}
/* Custom-colored collapsed notes: let inline style control shadow, just handle hover transform */
.sticky-note.collapse-list-view.custom-color:hover {
    transform: none;
    z-index: 1;
}
.sticky-note.collapse-list-view .note-title {
    /* remove extra title padding so title left-edge lines up with content */
    padding: 0;
    margin: 0;
    font-weight: 700;
}

/* When a collapsed note is expanded inline, restore normal block layout so content/actions flow correctly */
.sticky-note.collapse-list-view.inline-expanded {
    display: block;
    padding: 16px 18px; /* match inline-expanded padding */
}

/* When a single note is expanded inline while others remain collapsed */
.sticky-note.inline-expanded { padding: 16px 18px; }
/* Keep the content and timestamp as block so they flow below the title, but preserve
   the actions row as a right-aligned flex row to avoid shifting its alignment. */
.sticky-note.inline-expanded .note-content,
.sticky-note.inline-expanded .timestamp {
    display: block !important;
}
.sticky-note.inline-expanded .note-actions {
    display: flex !important;
    gap: 2px !important;
    justify-content: flex-end !important;
    padding-top: 5px !important;
    padding-left: 56px !important; /* reserve space for expand button like expanded view */
    border: none !important;
}
.sticky-note.inline-expanded .note-content.collapsed { /* remove clamping for inline-expanded */
    display: block !important;
    -webkit-line-clamp: unset;
    /* Standard property for browsers that support the non-prefixed spec */
    line-clamp: unset;
    overflow: visible;
}

/* Restore normal spacing between title and content for inline-expanded notes so
   collapsed->expanded transition matches expanded-list visuals exactly */
.sticky-note.inline-expanded .note-title,
.sticky-note.collapse-list-view.inline-expanded .note-title {
    margin-bottom: 10px; /* same as default .sticky-note .note-title */
}

/* Suppress visual jerk during expand-control measurement (class is added/removed in JS) */
.sticky-note .note-title { -webkit-user-select: none; user-select: none; }

/* History icon in card timestamp */
.timestamp-text {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.timestamp-history-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.7;
}
.timestamp-history-icon svg {
    width: 11px;
    height: 11px;
    display: block;
}

/* Ensure inline-expanded notes get the same actions layout as normal expanded notes */
.sticky-note.collapse-list-view.inline-expanded .note-actions {
    display: flex !important;
    gap: 2px !important;
    justify-content: flex-end !important;
    padding-top: 5px !important;
    padding-left: 56px !important; /* reserve space for expand button like expanded view */
    border: none !important;
}

/* GSI auth popup: card border & shadow (permanent) */
/* Mimics the clean elevated card seen on the referenced login page.
    Applies only to the Google Sign-In popup (`#authPopup`) so other popups remain unchanged. */
#authPopup .popup-content {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 28px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 18px 50px rgba(16,24,40,0.08), 0 6px 20px rgba(16,24,40,0.04);
    border: 1px solid rgba(16,24,40,0.06);
    color: var(--text-color);
}

/* Dark theme variant: keep elevated feel but adapt colors for dark background */
.dark-mode #authPopup .popup-content {
    background-color: var(--popup-bg);
    border-radius: 12px;
    padding: 28px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 18px 50px rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-color);
}

/* Settings popup: match auth card radius, border & shadow (permanent) */
#settingsPopup .popup-content {
    /* Keep existing width/padding rules from earlier in the file; only modify visual chrome */
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(16,24,40,0.08), 0 6px 20px rgba(16,24,40,0.04);
    border: 1px solid rgba(16,24,40,0.06);
}

.dark-mode #settingsPopup .popup-content {
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Loading spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   TAGS FEATURE STYLES
   ============================================ */

/* Tags popup content sizing */
.tags-popup-content {
    width: 420px;
    max-width: 92vw;
    text-align: center;
}
.tags-popup-content h2 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

/* ── Manage Attachments Popup ──────────────────── */
.attachments-popup-content {
    width: 420px;
    max-width: 92vw;
    text-align: center;
}
.attachments-popup-content h2 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}
#attachmentsPopupList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 4px;
    text-align: left;
}
.attachment-popup-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(128,128,128,0.18);
    background: var(--search-bg, #fff);
}
.attachment-popup-item .attachment-filename-text {
    flex: 1;
    max-width: none;
}

/* Tags input wrapper – flex container for tag pills + input */
.tags-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    background: var(--search-bg, #fff);
    min-height: 42px;
    cursor: text;
}

.tags-input-wrapper:focus-within {
    border-color: var(--btn-accent, #f857a6);
    box-shadow: 0 0 0 2px rgba(248,87,166,0.15);
}

/* Tag pills list (reset ul) */
#tagsListUl {
    display: contents; /* let li flow inside flex parent */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual tag pill */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 14px;
    background: var(--btn-gradient, #f472b6);
    color: var(--btn-fg, #000);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    list-style: none;
    animation: tagFadeIn 180ms ease;
}

@keyframes tagFadeIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.tag-pill .tag-remove {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.8;
    margin-left: 2px;
}

.tag-pill .tag-remove:hover {
    opacity: 1;
}

/* Tag input field */
#tagsInput {
    flex: 1;
    min-width: 80px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-color);
    padding: 4px 0;
}

#tagsInput::placeholder {
    color: var(--muted-text);
}

/* Tag pills displayed inline on note cards (read-only) */
.note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 2px;
}

/* Horizontal gap between title and tags only in collapsed list view (inline layout) */
.collapsed-list-mode .sticky-note .note-tags,
.sticky-note.collapse-list-view .note-tags {
    margin-left: 6px;
    margin-top: 0;
    margin-bottom: 0;
}

.note-tags .note-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--btn-gradient, #f472b6);
    color: var(--btn-fg, #000);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Tags button: relative positioning for count badge */
.note-actions button[title="Tags"] {
    position: relative;
}

/* Tags filter chip active state */
.chip.tag-active {
    border-color: var(--btn-accent, #f857a6) !important;
    background-color: rgba(248,87,166,0.04);
}
.chip.tag-active i { color: var(--btn-accent, #f857a6); }

/* Dark-mode overrides for tags */
.dark-mode .tags-input-wrapper {
    border-color: rgba(255,255,255,0.15);
    background: var(--search-bg, #2a2a2a);
}

.dark-mode .tags-input-wrapper:focus-within {
    border-color: var(--btn-accent, #f857a6);
    box-shadow: 0 0 0 2px rgba(248,87,166,0.2);
}

.dark-mode #tagsInput {
    color: var(--text-color);
}

.dark-mode .tag-pill {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Blurred tags row when note is hidden */
.note-tags.blurred {
    filter: blur(6px);
    opacity: 0.95;
    pointer-events: none;
    transition: filter 180ms ease, opacity 180ms ease;
}

/* ============================================
   SHARE NOTE POPUP
   ============================================ */
.share-popup-content {
    width: 400px;
    max-width: 94vw;
    text-align: center;
    padding: 28px 24px 24px;
}

.share-popup-content h2 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.share-icons-row {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}
.share-icons-row-4 { grid-template-columns: repeat(4, 1fr); }
.share-icons-row:last-child { margin-bottom: 0; }

.share-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 12px;
    transition: background 0.14s, transform 0.1s;
    color: var(--text-color);
}
.share-icon-btn:hover {
    background: rgba(0,0,0,0.05);
    transform: translateY(-2px);
}
.dark-mode .share-icon-btn:hover {
    background: rgba(255,255,255,0.07);
}

.share-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.06);
    transition: background 0.14s;
}
.share-icon-btn:hover .share-icon-circle {
    background: rgba(0,0,0,0.10);
}
.dark-mode .share-icon-circle {
    background: rgba(255,255,255,0.08);
}
.dark-mode .share-icon-btn:hover .share-icon-circle {
    background: rgba(255,255,255,0.14);
}

.share-icon-circle svg.lucide {
    width: 22px;
    height: 22px;
}

.share-icon-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-text);
    white-space: nowrap;
}

/* Platform icon colours */
.share-twitter .share-icon-circle    { background: rgba(29,161,242,0.12); }
.share-twitter .share-icon-circle svg { color: #1da1f2; }
.share-twitter:hover .share-icon-circle { background: rgba(29,161,242,0.22); }

.share-facebook .share-icon-circle    { background: rgba(24,119,242,0.12); }
.share-facebook .share-icon-circle svg { color: #1877f2; }
.share-facebook:hover .share-icon-circle { background: rgba(24,119,242,0.22); }

.share-reddit .share-icon-circle    { background: rgba(255,69,0,0.12); }
.share-reddit .share-icon-circle svg { color: #ff4500; }
.share-reddit:hover .share-icon-circle { background: rgba(255,69,0,0.22); }

.share-whatsapp .share-icon-circle    { background: rgba(37,211,102,0.12); }
.share-whatsapp .share-icon-circle svg { color: #25d366; }
.share-whatsapp:hover .share-icon-circle { background: rgba(37,211,102,0.22); }

.share-copy .share-icon-circle    { background: rgba(100,116,139,0.12); }
.share-copy .share-icon-circle svg { color: #64748b; }
.share-copy:hover .share-icon-circle { background: rgba(100,116,139,0.22); }

.share-calendar .share-icon-circle    { background: rgba(245,158,11,0.12); }
.share-calendar .share-icon-circle svg { color: #f59e0b; }
.share-calendar:hover .share-icon-circle { background: rgba(245,158,11,0.22); }

.share-email .share-icon-circle    { background: rgba(99,102,241,0.12); }
.share-email .share-icon-circle svg { color: #6366f1; }
.share-email:hover .share-icon-circle { background: rgba(99,102,241,0.22); }

.share-sms .share-icon-circle    { background: rgba(16,185,129,0.12); }
.share-sms .share-icon-circle svg { color: #10b981; }
.share-sms:hover .share-icon-circle { background: rgba(16,185,129,0.22); }

@media (max-width: 420px) {
    .share-icon-circle { width: 44px; height: 44px; }
    .share-icon-circle svg.lucide { width: 20px; height: 20px; }
    .share-popup-content { padding: 20px 14px 18px; }
    .share-icons-row { gap: 8px; }
}

/* ===== WEATHER POPUP ===== */
.weather-popup-content {
    width: 420px;
    max-width: 92vw;
    text-align: center;
    background: var(--container-bg);
    border-radius: 20px;
    padding: 28px 28px 24px;
    position: relative;
    margin: 4vh auto;
}

.weather-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.weather-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: var(--input-bg, rgba(128,128,128,0.1));
    color: var(--text-color);
    padding: 10px 18px;
    height: 46px;
    border-radius: 30px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s;
}

.weather-search input:focus {
    border-color: var(--btn-gradient-start);
}

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

.weather-search button {
    border: 0;
    outline: 0;
    background: var(--input-bg, rgba(128,128,128,0.1));
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: background 0.2s;
    flex-shrink: 0;
}

.weather-search button:hover {
    background: var(--hover-bg, rgba(128,128,128,0.2));
}

.weather-icon-large {
    font-size: 72px;
    line-height: 1;
    margin: 4px 0 8px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

.weather-datetime {
    font-size: 14px;
    color: var(--muted-text);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.weather-temp {
    font-size: 64px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 2px;
    color: var(--text-color);
}

.weather-city-name {
    font-size: 26px;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 20px;
    margin-top: -2px;
}

.weather-details {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 16px 10px 4px;
    border-top: 1px solid var(--border-color);
    gap: 16px;
}

.weather-detail-col {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.weather-detail-icon {
    width: 32px;
    height: 32px;
    color: var(--muted-text);
    flex-shrink: 0;
}

.weather-detail-value {
    font-size: 22px;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.2;
}

.weather-detail-label {
    font-size: 12px;
    color: var(--muted-text);
    margin-top: 1px;
}

.weather-loading {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.weather-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--btn-gradient-start);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.weather-error {
    color: var(--danger-color, #ef4444);
    font-size: 14px;
    padding: 20px 0 10px;
}

@media (max-width: 480px) {
    .weather-popup-content { padding: 20px 16px 18px; }
    .weather-temp { font-size: 52px; }
    .weather-city-name { font-size: 20px; }
    .weather-icon-large { font-size: 60px; }
}

/* ── Editor fullscreen expand button ──────────────────────────────── */
#editorExpandBtn {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 3px 4px !important;
    flex-shrink: 0;
    opacity: 0.62;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s;
    color: var(--icon-color, #555);
}
#editorExpandBtn:hover {
    opacity: 1;
    color: var(--btn-accent, #007bff);
}
#editorExpandBtn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    display: block;
}
.dark-mode #editorExpandBtn {
    color: rgba(255,255,255,0.75);
}
.dark-mode #editorExpandBtn:hover {
    color: var(--btn-accent, #ff5858);
}

/* ── Editor fullscreen overlay ───────────────────────────────────── */
#editorSection.editor-fullscreen {
    position: fixed !important;
    inset: 0;
    width: 100vw !important;
    height: 100dvh !important;     /* dynamic viewport height on mobile */
    z-index: 99998;
    background: var(--container-bg, #fff);
    display: flex !important;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Prevent page scroll while fullscreen is open (both html and body to cover all browsers) */
body.editor-fullscreen-active,
html.editor-fullscreen-active {
    overflow: hidden;
}

/* Toolbar: keep at natural height */
#editorSection.editor-fullscreen #toolbar.ql-toolbar,
#editorSection.editor-fullscreen .ql-toolbar.ql-snow {
    flex-shrink: 0;
    border-radius: 4px;
    margin-top: 6px;
}

/* Editor container: fill all remaining vertical space */
#editorSection.editor-fullscreen #editor {
    flex: 1 1 0;
    min-height: 0 !important;
    height: 0 !important;          /* flex child height controlled by flex */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    border-radius: 4px;
}

/* Quill container inside the editor: fill parent */
#editorSection.editor-fullscreen #editor.ql-container,
#editorSection.editor-fullscreen .ql-container.ql-snow {
    flex: 1 1 0;
    min-height: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 0 !important;   /* flex-grow handles actual height; 100% would = viewport height and push buttons off-screen */
}

/* The actual contenteditable: scrollable, fills container */
#editorSection.editor-fullscreen .ql-editor {
    flex: 1 1 0;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: 0 !important;   /* let flex-grow control height, not intrinsic content size */
    padding-bottom: 24px;
}

/* Action buttons row: keep at natural height */
#editorSection.editor-fullscreen .editor-buttons {
    flex-shrink: 0;
    padding-top: 8px;
}

/* ============================================
   CD-POPUP – CodyHouse-inspired confirmation/alert popup
   ============================================ */
.cd-popup {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--popup-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0s 0.2s;
    will-change: opacity;
}
.cd-popup.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-out, visibility 0s 0s;
}
.cd-popup-container {
    position: relative;
    width: 90%;
    max-width: 380px;
    background: var(--popup-bg);
    border-radius: 12px;
    text-align: center;
    padding: 40px 24px 0;
    transform: translate3d(0, -20px, 0);
    transition: transform 0.2s ease-out;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    will-change: transform;
}
.is-visible .cd-popup-container {
    transform: translate3d(0, 0, 0);
}
.cd-popup-container p {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-color);
    word-break: break-word;
}
/* Buttons row */
.cd-buttons {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(128,128,128,0.2);
}
.cd-buttons li {
    flex: 1;
}
.cd-buttons li:not(:last-child) {
    border-right: 1px solid rgba(128,128,128,0.2);
}
.cd-buttons a, .cd-buttons button {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.cd-buttons li:first-child a,
.cd-buttons li:first-child button {
    border-radius: 0 0 0 12px;
}
.cd-buttons li:last-child a,
.cd-buttons li:last-child button {
    border-radius: 0 0 12px 0;
}
/* Single-button (OK-only) variant */
.cd-buttons li:only-child a,
.cd-buttons li:only-child button {
    border-radius: 0 0 12px 12px;
}
.cd-buttons a:hover, .cd-buttons button:hover {
    background: rgba(128,128,128,0.1);
}
/* Yes / primary button colour */
.cd-buttons .cd-popup-btn-yes {
    color: var(--danger-color);
}
/* Close X — styled to match the settings popup close button (red) */
.cd-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s;
}
.cd-popup-close:hover .cd-popup-close::before,
.cd-popup-close:hover .cd-popup-close::after { background: darkred; }
.cd-popup-close::before,
.cd-popup-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: red;
    border-radius: 1px;
    transition: background 0.15s;
}
.cd-popup-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.cd-popup-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.cd-popup-close:hover::before,
.cd-popup-close:hover::after { background: darkred; }

/* Narrower popup on mobile so it doesn't span full width */
@media (max-width: 600px) {
    .cd-popup-container {
        width: 82%;
        max-width: 320px;
        padding: 36px 18px 0;
    }
}

/* On mobile, use the full dynamic viewport height and tighter padding */
@media (max-width: 600px) {
    #editorSection.editor-fullscreen {
        padding: 8px;
    }
    #editorSection.editor-fullscreen #toolbar.ql-toolbar,
    #editorSection.editor-fullscreen .ql-toolbar.ql-snow {
        margin-top: 4px;
    }
    #editorSection.editor-fullscreen .editor-buttons {
        padding-top: 6px;
    }
}

/* ================================================================
   ADMIN PANEL POPUP — mirrors Settings popup styles exactly
   ================================================================ */

/* Admin button in the Google Account popup */
.editor-btn.popup-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    color: #fff;
    border-color: transparent;
}
.editor-btn.popup-admin-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.editor-btn.popup-admin-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.dark-mode .editor-btn.popup-admin-btn {
    background: linear-gradient(90deg, #6d28d9, #9333ea);
    color: #fff;
    border-color: transparent;
}

/* Admin popup hr separator */
#adminPopup .popup-content hr {
    border: none;
    border-top: 2px solid #000000;
    margin: 12px 0;
    box-shadow: 0 8px 28px rgba(0,0,0,0.65);
    height: 0;
}
.dark-mode #adminPopup .popup-content hr {
    border-top: 2px solid #000000;
    box-shadow: 0 8px 28px rgba(0,0,0,0.75);
}

/* Admin popup links */
#adminPopup a { color: #ffd166; text-decoration: none; }
#adminPopup a:hover { color: #ffb347; text-decoration: none; }
.dark-mode #adminPopup a { color: #ffd166; text-decoration: none; }
.dark-mode #adminPopup a:hover { color: #ffb347; text-decoration: none; }

/* Tab headers */
#adminPopup .tab-headers {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: none;
}
#adminPopup .tab-headers::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Tab content */
#adminPopup .tab-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
}

/* Mobile: match settings popup exactly */
@media (max-width: 520px) {
    #adminPopup .popup-content {
        width: calc(100vw - 24px) !important;
        max-width: 100vw !important;
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 12px auto !important;
        padding: 14px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
    }
    #adminPopup .tab-headers {
        flex: 0 0 auto;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-bottom: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #adminPopup .tab-headers::-webkit-scrollbar { height: 0; display: none; }
    #adminPopup .tab-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 6px;
    }
    #adminPopup label, #adminPopup p, #adminPopup select, #adminPopup input, #adminPopup button {
        font-size: 15px;
    }
    #adminPopup .close-button {
        top: 10px !important;
        right: 12px !important;
        z-index: 20000 !important;
    }
    #adminPopup .tab-button {
        border-radius: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-shadow: none !important;
        border-bottom-width: 2px !important;
        border-bottom-style: solid !important;
    }
    #adminPopup .tab-headers {
        border-bottom: 1px solid #ddd !important;
    }
    #adminPopup .tab-button.active {
        border-bottom-color: #007bff !important;
    }
}

/* Desktop: match settings popup — only override height, let width inherit from .popup-content defaults */
@media (min-width: 521px) {
    html body #adminPopup.popup .popup-content,
    html body #adminPopup .popup-content {
        height: 80vh !important;
        max-height: 80vh !important;
        margin: 2vh auto !important;
        padding: 18px !important;
        padding-top: 18px !important;
        border-radius: 12px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    html body #adminPopup .popup-content h1 {
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        font-size: 20px;
    }
}