/* Timer History Styles */
/* Created on 2024-11-29 */

/* History Overlay */
.history-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5); /* White overlay for light mode */
    opacity: 0;
    visibility: hidden;
    z-index: 1002;
}

.history-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* History Button */
.history-btn {
    position: fixed;
    top: 2em;
    right: 2em;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    width: 40px;
    height: 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.5, 0, 0, 1), visibility 0.25s cubic-bezier(0.5, 0, 0, 1);
}

.fullscreen-time-overlay.active .history-btn {
    opacity: 1;
    visibility: visible;
}

.history-btn .button-icon {
    width: 40px;
    height: 40px;
    filter: invert(1); /* Invert white SVG to black for default white background */
}

/* History Sheet */
.history-sheet { /* Overall history sheet */
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    height: 100vh;
    background-color: white;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.5, 0, 0, 1);
    z-index: 1003; /* Above overlay */
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(128, 128, 128, 0.25);
}

.history-sheet.active {
    transform: translateX(0);
}

/* History Sheet Content */
.history-sheet-content {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding-bottom: 100px; /* Default space for info section (adjusted by JS) */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.history-sheet-content::-webkit-scrollbar {
    display: none;
}

/* History List */
.history-list {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: calc(100vh - 100px); /* Default height (adjusted by JS) */
}

/* History List Empty State*/
.history-list-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.875em;
    text-align: center;
    font-family: 'ABCDiatypeSemi-Mono', monospace;
    color: #808080;
    text-transform: uppercase;
    width: 100%;
}

/* History Date Section */
.history-date-section {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.history-date-header {
    padding: 1em;
    font-family: 'ABCDiatypeSemi-Mono', monospace;
    color: #000000;
    font-size: 0.875em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
}

.history-date-section:first-child .history-date-header {
    padding-top: 1em;
}

/* History List Item */
.history-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    position: relative;
}

/* Note indicator triangle */
.history-list-item.has-note::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #808080;
}

/* Adjust padding for items with notes to accommodate triangle */
.history-list-item.has-note {
    padding-left: 1em
}

/* Delete button */
.history-item-delete {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%) scale(0.5);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
    visibility: hidden;
    filter: blur(5px);
    transition: 
        opacity 0.25s cubic-bezier(0.5, 0, 0, 1),
        visibility 0.25s cubic-bezier(0.5, 0, 0, 1),
        transform 0.25s cubic-bezier(0.5, 0, 0, 1),
        filter 0.25s cubic-bezier(0.5, 0, 0, 1);
    z-index: 1;
}

.history-list-item:hover .history-item-delete {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    filter: blur(0);
}

/* Add subtle hover effect on the button itself */
.history-item-delete:hover {
    transform: translateY(-50%) scale(1);
}

.history-item-delete img {
    width: 20px;
    height: 20px;
    filter: invert(1); 
}

.history-date-section:last-child .history-list-item:last-child {
    border-bottom: none;
}

.history-item-time {
    font-family: 'ABCDiatypeSemi-Mono', monospace;
    color: #808080;
}

.history-item-duration-container {
    display: flex;
    align-items: center;
    gap: 0.75em;
    transition: transform 0.25s cubic-bezier(0.5, 0, 0, 1);
}


.history-completion-indicator { /* Circle indicator for completed timer */
    width: 8px;
    height: 8px;
    margin-bottom: 0.1em;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.history-item-duration {
    font-family: 'ABCDiatypeSemi-Mono', monospace;
    color: black;
}

/* Color for 00:00 duration */
.history-item-duration.zero-duration {
    color: #808080;
}

.history-list-item:hover .history-item-duration-container {
    transform: translateX(-1.75em); /* close button to right padding */
}


/* Dark mode styles for history overlay */
body.dark-mode .history-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Black overlay for dark mode */
}

/* Dark mode styles for history sheet */
body.dark-mode .history-sheet {
    background-color: black;
    border-left: 1px solid rgba(128, 128, 128, 0.25);
}

body.dark-mode .history-list-item {
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

body.dark-mode .history-date-section:last-child .history-list-item:last-child {
    border-bottom: none;
}

body.dark-mode .history-date-header {
    color: #FFFFFF;
    background-color: black;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

body.dark-mode .history-item-time {
    color: #808080;
}

body.dark-mode .history-item-duration {
    color: white;
}

/* Gray color for 00:00 duration in dark mode */
body.dark-mode .history-item-duration.zero-duration {
    color: #808080;
}

body.dark-mode .history-completion-indicator {
    background-color: white;
}

body.dark-mode .history-item-delete img {
    filter: none; /* Keep white icon for dark mode */
}