@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* light */
    --hist-bg: #ffffff;
    --hist-header: #f8f9fa;
    --hist-text: #333333;
    --hist-muted: #666666;
    --hist-border: #e0e0e0;
    --hist-input-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* dark */
        --hist-bg: #0b0b0b;
        --hist-header: #161616;
        --hist-text: #ffffff;
        --hist-muted: #b0b0b0;
        --hist-border: #2a2a2a;
        --hist-input-bg: #2a2a2a;
    }
}

/* history */
.page-wrapper {
    padding: 120px 20px 60px 20px; 
    display: flex;
    justify-content: center;
    min-height: 80vh;
}

.content-card {
    background-color: var(--hist-bg); 
    color: var(--hist-text); 
    width: 100%;
    max-width: 1000px;
    padding: 40px;
    border-left: 8px solid #BB9E3F; 
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.page-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--hist-text);
    border-bottom: 1px solid var(--hist-border);
    padding-bottom: 10px;
}

.history-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
    flex-wrap: wrap;
}

.tab-btn, #prev-day, #next-day {
    background: var(--hist-input-bg);
    color: var(--hist-text);
    border: 1px solid var(--hist-border);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn.active {
    background: #BB9E3F;
    color: white;
    border: none;
}

.date-picker select {
    background: var(--hist-input-bg);
    color: var(--hist-text);
    border: 1px solid var(--hist-border);
    padding: 7px;
    border-radius: 4px;
}

.event-card {
    background-color: var(--hist-bg); 
    border: 1px solid var(--hist-border);
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
    text-align: left;
}

.event-header {
    background-color: var(--hist-header);
    padding: 12px 20px;
    border-bottom: 1px solid var(--hist-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-type { 
	font-weight: bold; 
	color: var(--hist-text); 
}
.event-year {
	color: var(--hist-muted); 
	font-size: 0.85rem; 
}

.event-body { 
	padding: 20px; 
}

.event-username {
    color: #BB9E3F;
    font-weight: 700;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 5px;
}

.event-msg {
    color: var(--hist-muted);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--hist-border);
    font-style: italic;
}

/* mobile fix */
#nav-check, .nav-btn { display: none; }

@media (max-width: 768px) {
    .nav-btn { display: flex; flex-direction: column; height: 20px; width: 28px; cursor: pointer; margin-left: auto; justify-content: space-between; }
    .nav-btn span { height: 3px; width: 100%; background: white; }
    .nav-links { position: absolute; display: block; width: 100%; background: #000; height: 0; overflow: hidden; top: 70px; left: 0; transition: 0.3s; }
    #nav-check:checked ~ .nav-links { height: 100vh; }
    .nav-links li a { padding: 20px; display: block; border-bottom: 1px solid #1a1a1a; }
    .history-controls { flex-direction: column; align-items: stretch; }
}