/* Wink - Custom Styles */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Dashboard full-height panel (navbar is 53px) */
.h-main {
    height: calc(100vh - 53px);
    height: calc(100dvh - 53px);
}

/* === CSS Custom Properties === */
:root {
    --bar-width: 8px;
    --bar-gap: 3px;
    --bar-height-list: 28px;
    --bar-height-detail: 36px;
}

/* === Heartbeat Bars === */
.heartbeat-container {
    display: flex;
    align-items: flex-end;
    gap: var(--bar-gap);
    overflow: hidden;
}

.heartbeat-bar {
    width: var(--bar-width);
    border-radius: 2px;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

#monitor-list .heartbeat-bar {
    height: var(--bar-height-list);
}

#detail-heartbeat .heartbeat-bar {
    height: var(--bar-height-detail);
}

.heartbeat-bar--up {
    background-color: rgb(34 197 94 / 0.7);
}
.heartbeat-bar--up:hover {
    background-color: rgb(34 197 94);
}
.heartbeat-bar--down {
    background-color: rgb(239 68 68 / 0.7);
}
.heartbeat-bar--down:hover {
    background-color: rgb(239 68 68);
}
.heartbeat-bar--empty {
    background-color: rgb(107 114 128 / 0.2);
}
:root:not(.dark) .heartbeat-bar--empty {
    background-color: rgb(209 213 219 / 0.5);
}

/* === Monitor List Item States === */
.monitor-item {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.monitor-item--selected {
    background-color: rgb(243 244 246);
    border-color: rgb(209 213 219);
}
.dark .monitor-item--selected {
    background-color: rgb(31 41 55 / 0.7);
    border-color: rgb(55 65 81);
}

/* === Scrollbar === */
.scroll-thin::-webkit-scrollbar {
    width: 6px;
}
.scroll-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scroll-thin::-webkit-scrollbar-thumb {
    background: rgb(209 213 219);
    border-radius: 3px;
}
.dark .scroll-thin::-webkit-scrollbar-thumb {
    background: rgb(55 65 81);
}

/* === Uptime Colors === */
.uptime-good { color: rgb(22 163 74); }
.uptime-warn { color: rgb(202 138 4); }
.uptime-bad  { color: rgb(220 38 38); }
.dark .uptime-good { color: rgb(74 222 128); }
.dark .uptime-warn { color: rgb(250 204 21); }
.dark .uptime-bad  { color: rgb(248 113 113); }

/* === Status Dot Animation === */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.status-dot--down {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* === Heartbeat Bar Slide-in Animation === */
@keyframes barSlideUp {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
.heartbeat-bar--new {
    transform-origin: bottom;
    animation: barSlideUp 0.3s ease-out;
}