/* Fix for pinned notes layout - ensure pin area is properly positioned */

/* Override the base clean-tile overflow for notes */
.clean-tile.note {
    position: relative !important;
    overflow: visible !important; /* Override overflow: hidden from base clean-tile */
    background-color: rgba(217, 119, 6, 0.1) !important;
    border-left: 3px solid rgba(251, 191, 36, 0.6) !important;
    display: block !important; /* Change from flex to block for notes */
}

/* Note layout container - this is the actual flex container */
.note-layout {
    display: flex !important;
    gap: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    position: relative !important;
    z-index: 1 !important;
    background-color: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Pin area - fixed positioning on the left */
.note-pin-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    width: 3rem !important;
    flex-shrink: 0 !important;
    padding-top: 0.25rem !important;
    position: relative !important; /* Not absolute */
    z-index: 2 !important; /* Above other content */
    background-color: transparent !important;
}

/* Ensure pin area doesn't get overlapped */
.note-content-area {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    padding-left: 0 !important; /* Remove any extra padding */
}

/* Fix potential absolute positioning issues */
.note-pin-icon,
.note-source-icon,
.note-timestamp {
    position: relative !important; /* Not absolute */
    margin: 0 auto !important; /* Center within pin area */
}

/* Ensure delete button doesn't interfere */
.note-delete-btn {
    z-index: 10 !important; /* Above everything else */
}

/* Prevent any overlapping backgrounds or pseudo-elements */
.clean-tile.note::before,
.clean-tile.note::after {
    z-index: 0 !important; /* Behind content */
}

/* If there's a background element causing issues */
.note-layout::before,
.note-layout::after {
    display: none !important;
}

/* Ensure proper stacking context */
.clean-tile.note .note-pin-area,
.clean-tile.note .note-content-area {
    transform: translateZ(0); /* Create new stacking context */
}

/* Force correct display for pinned notes */
.clean-tile.note {
    display: block !important;
    flex-direction: unset !important;
    padding: 0 !important; /* Remove base padding, let note-layout handle it */
}

/* Ensure pin area is visible and properly aligned */
.clean-tile.note .note-pin-area {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Debug - make pin area more visible */
.note-pin-area {
    /* background-color: rgba(255, 255, 0, 0.1) !important; */ /* Yellow tint for debugging */
    min-height: 4rem !important; /* Ensure minimum height */
}