/* Ported from Cachet resources/views/partials/uptime-history-styles.blade.php (used by /uptime and /history). */

/* This page's --e2e-* variables are aliases onto the site-wide design
   tokens (defined in resources/assets/sass/_e2e-theme.scss) rather than a
   second, independently-maintained palette -- so this page automatically
   stays in sync with the rest of the site's light/dark theming instead of
   silently drifting out of sync with it, which is what happened before. */
:root {
    --e2e-ink: var(--text-primary);
    --e2e-muted: var(--text-secondary);
    --e2e-border: var(--border);
    --e2e-card: var(--surface);
    --e2e-blue: var(--accent);
    --e2e-radius: var(--radius);
    --e2e-shadow-sm: var(--shadow-1);
    --e2e-shadow-md: var(--shadow-2);
    --e2e-transition: var(--dur-fast) var(--ease-out);

    --e2e-uptime-operational: #16A34A;
    --e2e-uptime-minor: #84CC16;
    --e2e-uptime-elevated: #F59E0B;
    --e2e-uptime-major: #EF4444;
    --e2e-uptime-nodata: var(--divider);
    --e2e-uptime-nodata-border: var(--border);
    --e2e-uptime-bg: var(--bg);
    --e2e-uptime-ink: var(--text-primary);
    --e2e-uptime-muted: var(--text-muted);
    --e2e-uptime-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Status-band colors use the same exact hex values in both themes -- they're
   already vivid, WCAG-reasonable colors (Tailwind green-600/lime-500/amber-500/
   red-500) that read clearly against both light and dark surfaces. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --e2e-uptime-operational: #16A34A;
        --e2e-uptime-minor: #84CC16;
        --e2e-uptime-elevated: #F59E0B;
        --e2e-uptime-major: #EF4444;
    }
}
:root[data-theme="dark"] {
    --e2e-uptime-operational: #16A34A;
    --e2e-uptime-minor: #84CC16;
    --e2e-uptime-elevated: #F59E0B;
    --e2e-uptime-major: #EF4444;
}

body.status-uptime {
    background: var(--e2e-uptime-bg) !important;
}

body.status-uptime #app {
    font-family: var(--e2e-uptime-font);
    color: var(--e2e-uptime-ink);
}

.e2e-subnav {
    display: flex;
    border-bottom: 1px solid var(--e2e-border);
    margin-bottom: 32px;
}

.e2e-subnav__link {
    padding: 10px 18px;
    margin: 0 6px -1px 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--e2e-uptime-muted) !important;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    transition: color var(--e2e-transition), background-color var(--e2e-transition);
}

.e2e-subnav__link:hover {
    color: var(--e2e-uptime-ink) !important;
    background: var(--surface-hover);
    text-decoration: none;
}

.e2e-subnav__link--active {
    color: var(--e2e-uptime-ink) !important;
    background: var(--e2e-uptime-bg);
    border-color: var(--e2e-border) var(--e2e-border) var(--e2e-uptime-bg);
}

.e2e-uptime__empty {
    color: var(--e2e-uptime-muted);
    padding: 40px 0;
    text-align: center;
}

.e2e-uptime__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    margin-bottom: 32px;
}

/* /history has no service/region dropdowns -- the pager is the toolbar's
   only child, so space-between (which needs 2+ items to distribute space)
   would otherwise leave it flush left instead of matching the pager's
   usual right-aligned position on /uptime. */
.e2e-uptime__toolbar--pager-only {
    justify-content: flex-end;
}

.e2e-uptime-select-group {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    margin: 0;
}

/* Custom dropdown -- replaces a native <select>, whose *open* option list
   is rendered by the OS and cannot be restyled with CSS in any browser.
   Built from ordinary elements instead so every state (background, text,
   border, hover, selected) is fully themeable. */
.e2e-dd {
    position: relative;
}

.e2e-dd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 2px solid var(--e2e-border);
    border-radius: 3px;
    background-color: var(--e2e-card);
    color: var(--e2e-ink);
    font-family: var(--e2e-uptime-font);
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: var(--e2e-shadow-sm);
    transition: border-color var(--e2e-transition), box-shadow var(--e2e-transition), background-color var(--e2e-transition);
}

.e2e-dd-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.e2e-dd-trigger:hover:not(:disabled) {
    border-color: var(--e2e-muted);
    box-shadow: var(--e2e-shadow-md);
}

.e2e-dd.is-open .e2e-dd-trigger {
    border-color: var(--e2e-blue);
    box-shadow: var(--e2e-shadow-md);
}

.e2e-dd-trigger:disabled {
    cursor: default;
    opacity: 0.6;
}

.e2e-dd-chevron {
    flex-shrink: 0;
    color: var(--e2e-muted);
    transition: transform var(--e2e-transition);
}

.e2e-dd.is-open .e2e-dd-chevron {
    transform: rotate(180deg);
    color: var(--e2e-blue);
}

.e2e-dd-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 100%;
    width: max-content;
    max-width: 280px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: var(--e2e-card);
    border: 1px solid var(--e2e-border);
    border-radius: 8px;
    box-shadow: var(--e2e-shadow-md);
    max-height: 280px;
    overflow-y: auto;
}

.e2e-dd-option {
    border-radius: 6px;
}

.e2e-dd-option a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--e2e-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 120ms var(--e2e-transition);
}

.e2e-dd-option a:hover {
    background-color: var(--e2e-uptime-bg);
    text-decoration: none;
}

.e2e-dd-option.is-selected a {
    font-weight: 600;
    color: var(--e2e-blue);
}

#e2e-uptime-service {
    min-width: 160px;
    max-width: 280px;
    flex: 1 1 auto;
}

#e2e-uptime-region {
    min-width: 90px;
    max-width: 160px;
    flex: 0 0 auto;
}

.e2e-uptime-pager {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.e2e-uptime-pager__label {
    margin: 0 16px;
    font-size: 16px;
    font-weight: 400;
    color: var(--e2e-uptime-ink);
    white-space: nowrap;
    display: inline-block;
    min-width: 12ch;
    text-align: center;
}

.e2e-uptime-pager__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--e2e-uptime-muted);
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--e2e-transition);
}

.e2e-uptime-pager__btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-hover);
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--e2e-transition);
    z-index: -1;
}

.e2e-uptime-pager__btn:hover {
    color: var(--e2e-uptime-ink);
    text-decoration: none;
}

.e2e-uptime-pager__btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.e2e-uptime-pager__btn--disabled {
    color: var(--text-muted);
    cursor: default;
}

.e2e-uptime-pager__btn--disabled:hover {
    color: var(--text-muted);
}

.e2e-uptime-pager__btn--disabled:hover::before {
    transform: translate(-50%, -50%) scale(0);
}

/* Always exactly 3 months (MONTHS_TO_SHOW in UptimeController) -- a grid
   with equal fractional columns means the three cards always fill the
   full container width and stay evenly distributed, at any viewport
   width, instead of a flex-wrap row of fixed-260px cards that clump to
   the left and leave a growing gap on wider screens. */
.e2e-uptime__months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.e2e-uptime-month {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    border-radius: var(--e2e-radius);
    background: var(--e2e-card);
    box-shadow: inset 0 0 0 1px var(--e2e-border), var(--e2e-shadow-sm);
    transition: box-shadow var(--e2e-transition), transform var(--e2e-transition);
    padding: 16px;
}
.e2e-uptime-month * {
    box-sizing: border-box;
}

.e2e-uptime-month:hover {
    box-shadow: inset 0 0 0 1px var(--e2e-border), var(--e2e-shadow-md);
    transform: translateY(-2px);
}

.e2e-uptime-month__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.e2e-uptime-month__name {
    font-weight: 500;
    color: var(--e2e-uptime-ink);
    font-size: 16px;
}

.e2e-uptime-month__pct {
    font-size: 14px;
    font-weight: 400;
    color: var(--e2e-uptime-muted);
}

.e2e-uptime-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.e2e-uptime-calendar__day,
.e2e-uptime-calendar__pad {
    aspect-ratio: 1;
    width: 100%;
}

.e2e-uptime-calendar__pad {
    visibility: hidden;
}

.e2e-uptime-calendar__day {
    border-radius: 2px;
    cursor: default;
    transition: transform var(--e2e-transition), box-shadow var(--e2e-transition);
}

.e2e-uptime-calendar__day:hover {
    transform: scale(1.18);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), var(--e2e-shadow-md);
    position: relative;
    z-index: 1;
}

.e2e-uptime-calendar__day--operational { background-color: var(--e2e-uptime-operational); }
.e2e-uptime-calendar__day--minor { background-color: var(--e2e-uptime-minor); }
.e2e-uptime-calendar__day--elevated { background-color: var(--e2e-uptime-elevated); }
.e2e-uptime-calendar__day--major { background-color: var(--e2e-uptime-major); }

.e2e-uptime-calendar__day--no-data {
    background-color: var(--e2e-uptime-nodata);
}

.e2e-uptime__footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--e2e-border);
}

.e2e-uptime-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.e2e-uptime-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--e2e-uptime-muted);
}

.e2e-uptime-legend__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.e2e-uptime-legend__swatch--operational { background-color: var(--e2e-uptime-operational); }
.e2e-uptime-legend__swatch--minor { background-color: var(--e2e-uptime-minor); }
.e2e-uptime-legend__swatch--elevated { background-color: var(--e2e-uptime-elevated); }
.e2e-uptime-legend__swatch--major { background-color: var(--e2e-uptime-major); }
.e2e-uptime-legend__swatch--no-data {
    background-color: var(--e2e-uptime-nodata);
    border: 1px solid var(--e2e-uptime-nodata-border);
}

@media (max-width: 768px) {
    .e2e-uptime__toolbar {
        flex-wrap: wrap;
    }
    .e2e-uptime-pager {
        margin-left: auto;
    }
    /* Three equal columns get too narrow to hold a 7-day calendar
       comfortably below this width -- stack them full-width instead,
       still evenly spaced (single-column grid, same gap). */
    .e2e-uptime__months {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .e2e-uptime__toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .e2e-uptime-pager {
        margin-left: 0;
        justify-content: center;
    }
    /* Flex items default to min-width:auto, which floors them at their
       *un-truncated* text width (because .e2e-dd-trigger uses
       white-space:nowrap) -- so text-overflow:ellipsis never actually
       gets room to kick in, and the two dropdowns overflow the toolbar
       instead of shrinking. Letting them share the row equally with
       min-width:0 is what actually lets the ellipsis do its job. */
    .e2e-uptime-select-group {
        width: 100%;
    }
    #e2e-uptime-service,
    #e2e-uptime-region {
        min-width: 0;
        max-width: none;
        flex: 1 1 0;
    }
}

/* /history: per-month incident list, styled with the same tokens as the
   uptime grid above so both pages read as one feature. */
.e2e-history-month {
    margin-top: 40px;
}

.e2e-history-month:first-child {
    margin-top: 0;
}

.e2e-history-month__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--e2e-border);
}

.e2e-history-month__name {
    font-weight: 500;
    color: var(--e2e-uptime-ink);
    font-size: 20px;
}

.e2e-history-month-incident.hide {
    display: none;
}

.e2e-history-empty {
    color: var(--e2e-uptime-muted);
    padding: 8px 0 24px;
}

/* /history has no service/region dropdowns, so the toolbar's only child is
   the pager -- its own line-height already provides enough breathing room,
   the extra 32px below was tuned for a two-row toolbar (dropdowns + pager)
   and reads as an oversized gap with just the pager alone. */
.e2e-uptime__toolbar--pager-only {
    margin-bottom: 12px;
}

/* ------------------------------------------------------------------------
   /history incident cards: the shared `partials/incident-card.blade.php`
   markup (also used by the homepage and single-incident timelines, which
   this must not affect) is old Bootstrap-panel markup -- a hardcoded
   35px circle, a CSS-triangle "speech bubble" pointer, tight fixed
   paddings. Re-skinned here to match the card language used by the
   /uptime grid above it (soft shadow, token-driven colors, rounded
   corners, no speech-bubble), scoped to body.status-uptime so the
   homepage/single-incident pages -- which don't carry that body class --
   keep their existing look untouched. Structure/markup is unchanged;
   only appearance.
   ------------------------------------------------------------------------ */
body.status-uptime .timeline .content-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

body.status-uptime .timeline .moment {
    padding-bottom: 24px;
}

body.status-uptime .timeline .moment:before {
    background: var(--border-strong) !important;
}

body.status-uptime .timeline .moment .status-icon {
    box-shadow: var(--e2e-shadow-sm);
    border-color: var(--e2e-border) !important;
}

body.status-uptime .timeline .moment .panel {
    border-radius: var(--e2e-radius) !important;
    box-shadow: var(--e2e-shadow-sm);
    overflow: hidden;
}

body.status-uptime .timeline .moment .panel:hover {
    box-shadow: var(--e2e-shadow-md);
}

/* The speech-bubble pointer (two stacked CSS triangles) doesn't fit a
   card-based design language -- the timeline dot + connecting line
   already show which update a card belongs to. */
body.status-uptime .timeline .moment .panel.panel-message:before,
body.status-uptime .timeline .moment .panel.panel-message:after {
    display: none !important;
}

body.status-uptime .panel .panel-heading {
    padding: 18px 22px !important;
}

body.status-uptime .panel .panel-heading strong {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.status-uptime .panel .panel-heading .date {
    display: block;
    margin-top: 4px;
}

body.status-uptime .panel .panel-heading .date abbr {
    font-size: 13px;
    font-weight: 400;
    color: var(--e2e-uptime-muted) !important;
    text-decoration: none;
    border: none;
}

body.status-uptime .panel .panel-heading .label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--e2e-uptime-bg) !important;
    color: var(--e2e-uptime-muted) !important;
    box-shadow: inset 0 0 0 1px var(--e2e-border);
}

body.status-uptime .panel .panel-body {
    padding: 20px 22px !important;
    font-size: 15px;
    line-height: 1.65;
}

body.status-uptime .panel .panel-body h1,
body.status-uptime .panel .panel-body h2,
body.status-uptime .panel .panel-body h3,
body.status-uptime .panel .panel-body h4 {
    color: var(--e2e-uptime-ink);
}

body.status-uptime .list-group .list-group-item {
    padding: 14px 22px !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    font-size: 14px;
}

body.status-uptime .list-group .list-group-item:last-child {
    border-bottom: none !important;
}