/*!
 * ChargeX live status
 *
 * Sits on top of the site's existing Energox/Bootstrap 4 stylesheet and reuses
 * its type and brand tokens. Status colours are deliberately semantic and kept
 * separate from the brand accent, so "available" never reads as "branded".
 *
 * All selectors are namespaced cx- so nothing here can collide with style.css
 * or responsive.css.
 */

:root {
    /* Brand, taken from assets/css/style.css :root */
    --cx-accent:  #1b96e4;
    --cx-navy:    #141430;
    --cx-heading: #292929;
    --cx-text:    #666666;
    --cx-rule:    #e4e4e4;
    --cx-surface: #ffffff;
    --cx-wash:    #f8f8f8;

    /* Semantic status — not brand colours */
    --cx-available: #12a150;
    --cx-charging:  #2563eb;
    --cx-occupied:  #d97706;
    --cx-fault:     #dc2626;
    --cx-unknown:   #8a9499;
}

/* ------------------------------------------------------------------ layout */

.cx-wrap { padding: 60px 0 80px; }

.cx-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 18px;
    margin-bottom: 8px;
}

.cx-head h2 { margin: 0; }

.cx-summary {
    font-size: 15px;
    color: var(--cx-text);
    margin: 0 0 26px;
}

/* Live indicator + "checked N back" ------------------------------------- */

#cx-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.cx-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
}

.cx-live-dot.cx-available {
    background: var(--cx-available);
    box-shadow: 0 0 0 0 rgba(18, 161, 80, .55);
    animation: cx-pulse 2.4s infinite;
}

.cx-live-dot.cx-unknown { background: var(--cx-unknown); }

@keyframes cx-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(18, 161, 80, .5); }
    70%  { box-shadow: 0 0 0 7px rgba(18, 161, 80, 0); }
    100% { box-shadow: 0 0 0 0   rgba(18, 161, 80, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cx-live-dot.cx-available { animation: none; }
    .cx-flash { animation: none !important; }
}

.cx-stamp {
    font-size: 13.5px;
    color: var(--cx-text);
    font-variant-numeric: tabular-nums;
}

.cx-stamp.cx-muted { color: var(--cx-unknown); }

/* ---------------------------------------------------------- title banner */

/* The template's inner-page banner (style.css "Sub banner") filled about half
   of the first screen, pushing the station list below the fold. Same content
   here, with less padding and a smaller title. Scoped by an extra class on
   this page only, so every other page keeps the template's banner. Each value
   is at or below the template's own value for that screen width. */
.sub_banner.cx-compact-banner .sub_banner_con { padding: 24px 0 44px; }
.sub_banner.cx-compact-banner .sub_banner_con h1 {
    font-size: 44px;
    line-height: 52px;
    margin-bottom: 12px;
}
.sub_banner.cx-compact-banner .sub_banner_con p { margin-bottom: 22px; }

/* logo.png is a 3072px square with the wordmark in its middle third, so at the
   template's 140px width the header carried ~85px of transparent space. Crop
   to the wordmark; it still renders at the same size and position. */
.sub_banner.cx-compact-banner .header .logo img {
    height: 56px;
    object-fit: cover;
}

/* ------------------------------------------------------------ alert banner */

.cx-alert {
    background: #fff8ec;
    border: 1px solid #f3ddb4;
    border-left: 4px solid var(--cx-occupied);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #6b4b12;
}

.cx-alert strong { color: #55391a; }

/* --------------------------------------------------------------- stations */

.cx-stations { display: flex; flex-direction: column; gap: 20px; }

.cx-station {
    background: var(--cx-surface);
    border: 1px solid var(--cx-rule);
    border-radius: 10px;
    padding: 24px 26px;
    transition: box-shadow .25s ease, border-color .25s ease;
}

.cx-station:hover {
    border-color: #cfd8dd;
    box-shadow: 0 6px 22px rgba(20, 20, 48, .06);
}

.cx-flash { animation: cx-flash 1.4s ease; }

@keyframes cx-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(27, 150, 228, 0); }
    30%      { box-shadow: 0 0 0 4px rgba(27, 150, 228, .28); }
}

.cx-station-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 6px;
}

.cx-station-name {
    font-size: 20px;
    margin: 0;
    color: var(--cx-heading);
    line-height: 1.35;
}

.cx-count {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.cx-count.cx-available { color: #0b6c36; background: rgba(18, 161, 80, .11); }
.cx-count.cx-busy      { color: #1e4fb8; background: rgba(37, 99, 235, .11); }

.cx-address {
    /* Addresses arrive verbatim from the CSMS and may contain newlines. */
    white-space: pre-line;
    margin: 0 0 2px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--cx-text);
}

.cx-place {
    margin: 0 0 10px;
    font-size: 14.5px;
    color: var(--cx-text);
}

.cx-nocoords {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--cx-unknown);
    font-style: italic;
}

.cx-directions {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--cx-accent);
    text-decoration: none;
    margin-bottom: 18px;
}

.cx-directions:hover { text-decoration: underline; color: var(--cx-accent); }

.cx-directions::after {
    content: "\2192";
    margin-left: 6px;
    display: inline-block;
    transition: transform .2s ease;
}

.cx-directions:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- chargers */

.cx-charger + .cx-charger { margin-top: 16px; }

.cx-charger-label {
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cx-unknown);
    font-weight: 700;
    margin: 0 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--cx-rule);
}

.cx-connectors { list-style: none; margin: 0; padding: 0; }

.cx-connector {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
}

.cx-connector + .cx-connector { border-top: 1px dashed #eef1f2; }

.cx-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
    margin-top: 5px;
}

.cx-dot.cx-available { background: var(--cx-available); }
.cx-dot.cx-charging  { background: var(--cx-charging); }
.cx-dot.cx-occupied  { background: var(--cx-occupied); }
.cx-dot.cx-fault     { background: var(--cx-fault); }
.cx-dot.cx-unknown   { background: var(--cx-unknown); }

.cx-connector-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.cx-connector-spec {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 220px;
}

.cx-connector-no {
    font-size: 14.5px;
    color: var(--cx-heading);
    font-weight: 500;
}

.cx-tag {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--cx-text);
    background: var(--cx-wash);
    border: 1px solid var(--cx-rule);
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cx-connector-status {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.cx-connector-status.cx-available { color: var(--cx-available); }
.cx-connector-status.cx-charging  { color: var(--cx-charging); }
.cx-connector-status.cx-occupied  { color: var(--cx-occupied); }
.cx-connector-status.cx-fault     { color: var(--cx-fault); }
.cx-connector-status.cx-unknown   { color: var(--cx-unknown); }

.cx-connector-since {
    flex: 1 0 100%;
    font-size: 12.5px;
    color: var(--cx-unknown);
    font-variant-numeric: tabular-nums;
}

.cx-empty {
    background: var(--cx-wash);
    border: 1px dashed var(--cx-rule);
    border-radius: 10px;
    padding: 40px 26px;
    text-align: center;
    color: var(--cx-text);
}

.cx-empty p { margin: 0; }

/* Static fallback: visible before the first successful load and whenever the
   feed is unavailable, so the page is never a dead end. */
.cx-fallback {
    background: var(--cx-wash);
    border: 1px solid var(--cx-rule);
    border-radius: 10px;
    padding: 26px 28px;
}

.cx-fallback h3 {
    font-size: 18px;
    color: var(--cx-heading);
    margin: 0 0 10px;
}

.cx-fallback p {
    font-size: 14.5px;
    color: var(--cx-text);
    margin: 0 0 14px;
}

.cx-fallback ul {
    margin: 0 0 16px;
    padding-left: 20px;
}

.cx-fallback li {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--cx-text);
    margin-bottom: 10px;
}

.cx-fallback a {
    color: var(--cx-accent);
    font-weight: 600;
    text-decoration: none;
}

.cx-fallback a:hover { text-decoration: underline; }

.cx-fallback-cta { margin-bottom: 0 !important; }

/* --------------------------------------------------------------- map panel */

.cx-map-panel {
    position: sticky;
    top: 24px;
    border: 1px solid var(--cx-rule);
    border-radius: 10px;
    overflow: hidden;
    background: var(--cx-surface);
}

#cx-map {
    height: 420px;
    width: 100%;
    background: var(--cx-wash);
}

.cx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 18px;
    border-top: 1px solid var(--cx-rule);
    font-size: 12.5px;
    color: var(--cx-text);
}

.cx-legend span { display: inline-flex; align-items: center; gap: 7px; }

.cx-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}

/* Map pins are CSS, not image files — nothing to 404 and status-coloured. */
.cx-pin {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .38);
    background: var(--cx-unknown);
}

.cx-pin-available { background: var(--cx-available); }
.cx-pin-charging  { background: var(--cx-charging); }
.cx-pin-occupied  { background: var(--cx-occupied); }
.cx-pin-fault     { background: var(--cx-fault); }
.cx-pin-unknown   { background: var(--cx-unknown); }

.leaflet-container { font: inherit; }

/* ------------------------------------------------------- drop-in badge --- */
/* Used on kakinada.html / rjm.html, which do not load Bootstrap. Fully
   self-contained so it inherits nothing it should not. */

.cx-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-family: inherit;
}

.cx-pill {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 999px;
    line-height: 1.4;
}

.cx-pill.cx-available { color: #0b6c36; background: rgba(18, 161, 80, .12); }
.cx-pill.cx-busy      { color: #1e4fb8; background: rgba(37, 99, 235, .12); }
.cx-pill.cx-unknown   { color: #5a6569; background: rgba(138, 148, 153, .16); }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 991px) {
    .cx-map-panel { position: static; margin-bottom: 24px; }
    #cx-map { height: 300px; }
}

@media (max-width: 767px) {
    .sub_banner.cx-compact-banner .sub_banner_con { padding: 10px 0 36px; }
    .sub_banner.cx-compact-banner .sub_banner_con h1 { font-size: 34px; line-height: 40px; }
    .sub_banner.cx-compact-banner .sub_banner_con p { margin-bottom: 18px; }
}

@media (max-width: 575px) {
    .sub_banner.cx-compact-banner .sub_banner_con { padding: 6px 0 30px; }
    .sub_banner.cx-compact-banner .sub_banner_con h1 { font-size: 30px; line-height: 36px; }
    .cx-wrap { padding: 40px 0 60px; }
    .cx-station { padding: 20px 18px; }
    .cx-station-name { font-size: 18px; }
    .cx-connector-status { white-space: normal; }
}