/* Design tokens: shared by all views (view styles live in css/views/) */
:root {
    /* Watercolour field-guide palette: warm paper, ink, dusty heather purple, sage */
    --vw-primary: #5e4a8a;
    --vw-primary-hover: #4a3a6f;
    --vw-primary-soft: #ece6f2;
    --vw-primary-tint: #d6cbe4;
    --vw-accent: #a993c9;
    --vw-online: #4f7a3a;
    --vw-online-soft: #e6eedb;
    --vw-offline: #857b6b;
    --vw-offline-soft: #efe9dc;
    --vw-warning: #b8692a;
    --vw-warning-soft: #f7ead9;
    --vw-danger: #a63a2e;
    --vw-danger-soft: #f6e2dc;
    --vw-text: #3a3328;
    --vw-muted: #7d7262;
    --vw-bg: #f5efe2;
    --vw-surface: #fbf8f1;
    --vw-paper: #f8f3e8;
    --vw-border: #e5dccb;
    --vw-radius: 14px;
    --vw-radius-sm: 9px;
    --vw-shadow: 0 1px 2px rgb(74 60 40 / .06), 0 6px 20px rgb(74 60 40 / .06);
    --vw-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

    --bs-body-color: var(--vw-text);
    --bs-body-bg: var(--vw-bg);
    --bs-border-color: var(--vw-border);
    --bs-secondary-color: var(--vw-muted);
    --bs-link-color-rgb: 94, 74, 138;
    --bs-link-hover-color-rgb: 74, 58, 111;
    --bs-body-font-family: var(--vw-font-serif);
}

/* Soft paper look: faint watercolour washes behind the content */
body { background-image: radial-gradient(ellipse at 15% 0%, rgb(214 203 228 / .35), transparent 45%), radial-gradient(ellipse at 90% 10%, rgb(198 214 178 / .3), transparent 40%); background-attachment: fixed; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 { font-family: var(--vw-font-serif); color: var(--vw-text); font-weight: 600; letter-spacing: -.01em; }
.form-control, .form-select { background-color: var(--vw-surface); border-color: var(--vw-border); color: var(--vw-text); }
.form-control:focus, .form-select:focus { border-color: var(--vw-accent); box-shadow: 0 0 0 .2rem rgb(94 74 138 / .15); }
.form-check-input:checked { background-color: var(--vw-primary); border-color: var(--vw-primary); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--vw-text); }
.panel { border: 1px solid var(--vw-border); }
.card { --bs-card-bg: var(--vw-surface); --bs-card-border-color: var(--vw-border); }

body { background: var(--vw-bg); color: var(--vw-text); min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; } /* pushes the footer to the bottom on short pages */

/* Header */
.site-header { background: var(--vw-surface); border-bottom: 1px solid var(--vw-border); box-shadow: var(--vw-shadow); margin-bottom: 2rem; }
.site-header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 2rem; padding-top: .75rem; padding-bottom: .75rem; }
.brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.brand-logo { display: block; height: 3rem; width: auto; max-width: 100%; }
.header-search { position: relative; width: 20rem; max-width: 100%; margin-left: auto; }
.header-search .form-control { padding: .6rem .9rem .6rem 2.8rem; border-radius: var(--vw-radius-sm); background: var(--vw-surface); border-color: var(--vw-border); }
.header-account { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--vw-offline-soft); color: var(--vw-muted); text-decoration: none; }
.header-account:hover { background: var(--vw-primary-soft); color: var(--vw-primary); }
.header-search-toggle { display: none; }
/* Phones/tablets: a search icon in the bar; the search box opens on its own line below */
@media (max-width: 767.98px) {
    .site-header-inner { column-gap: .75rem; }
    .brand { margin-right: auto; min-width: 0; }
    .brand-logo { height: 2.5rem; }
    .header-search-toggle { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--vw-offline-soft); color: var(--vw-muted); }
    .header-search-toggle:hover, .search-open .header-search-toggle { background: var(--vw-primary-soft); color: var(--vw-primary); }
    .site-header .header-search { display: none; order: 1; width: 100%; margin-left: 0; }
    .site-header.search-open .header-search { display: block; }
}

/* Shared building blocks */
.panel { background: var(--vw-surface); border-radius: var(--vw-radius); box-shadow: var(--vw-shadow); padding: 1.25rem 1.5rem; }
.status { display: inline-flex; align-items: center; gap: .4rem; }
.status::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--vw-offline); }
.status-online { color: var(--vw-online); }
.status-online::before { background: var(--vw-online); }
.status-offline { color: var(--vw-offline); }
.badge-online { background: var(--vw-online-soft); color: var(--vw-online); }
.badge-offline { background: var(--vw-offline-soft); color: var(--vw-offline); }
.badge { font-size: .9rem; font-weight: 600; padding: .3rem .8rem; border-radius: 999px; vertical-align: middle; }

/* Plain pages (devices, station details) */
main table { border-collapse: collapse; margin-top: 1rem; }
main td, main th { padding: .35rem 1rem .35rem 0; text-align: left; vertical-align: top; }
.error, .danger { color: var(--vw-danger); }
.muted { color: var(--vw-muted); }
label { display: block; margin-top: .5rem; }
fieldset { margin: .75rem 0; border: 1px solid var(--vw-border); border-radius: 4px; padding: .5rem 1rem; }
legend { font-weight: 600; padding: 0 .25rem; float: none; width: auto; font-size: 1rem; }
code { word-break: break-all; }
.online { color: var(--vw-online); font-weight: bold; }

/* Trends and map markers (Leaflet divIcon), used by several views */
.trend-up { color: var(--vw-online); font-weight: 600; }
.trend-down { color: var(--vw-danger); font-weight: 600; }
.pin-head { width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--vw-online); border: 3px solid var(--vw-surface); box-shadow: 0 2px 6px rgb(0 0 0 / .3); display: grid; place-items: center; }
.pin-head svg { width: 20px; height: 20px; color: #fff; transform: rotate(45deg); }
.pin-offline .pin-head { background: var(--vw-offline); }
.pin-selected .pin-head { background: var(--vw-primary); }
.pin-plain { width: 36px; height: 36px; }
.pin-plain::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fff; }

/* Font Awesome icons (sized by font-size) */
.pin-head i { font-size: 17px; color: #fff; transform: rotate(45deg); }

/* Alerts: soft background, coloured accent bar and icon (Bootstrap .alert + variant) */
.alert { --vw-alert: var(--vw-primary); --vw-alert-soft: var(--vw-primary-soft); --vw-alert-icon: "\f05a";
    display: flex; align-items: flex-start; gap: .85rem; padding: .9rem 1.25rem; border: 0; border-left: 4px solid var(--vw-alert);
    border-radius: var(--vw-radius-sm); background: var(--vw-alert-soft); color: var(--vw-text); box-shadow: var(--vw-shadow); }
.alert::before { content: var(--vw-alert-icon); font-family: "Font Awesome 7 Free"; font-weight: 900; color: var(--vw-alert); font-size: 1.15rem; line-height: 1.4; }
.alert-success { --vw-alert: var(--vw-online); --vw-alert-soft: var(--vw-online-soft); --vw-alert-icon: "\f058"; }
.alert-warning { --vw-alert: var(--vw-warning); --vw-alert-soft: var(--vw-warning-soft); --vw-alert-icon: "\f071"; }
.alert-danger { --vw-alert: var(--vw-danger); --vw-alert-soft: var(--vw-danger-soft); --vw-alert-icon: "\f06a"; }

/* Footer: attribution link */
/* Footer: one compact line with links and credits */
.site-footer { background: var(--vw-surface); border-top: 1px solid var(--vw-border); color: var(--vw-muted); font-size: .85rem; }
.site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; padding-top: .9rem; padding-bottom: .9rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.footer-links a { color: var(--vw-text); text-decoration: none; font-weight: 500; }
.footer-links a:hover { color: var(--vw-primary); }
.footer-links .footer-install { color: var(--vw-muted); font-weight: 400; }
.footer-links .footer-install i { margin-right: .2rem; font-size: .85em; }
.footer-links .footer-install[hidden] { display: none; }


/* Page title + intro (homepage and station pages) */
.page-intro h1 { font-size: 2.4rem; font-weight: 600; margin-bottom: .25rem; }
.page-intro p { color: var(--vw-muted); font-size: 1.05rem; margin-bottom: 1.25rem; }
@media (max-width: 575.98px) { .page-intro h1 { font-size: 1.75rem; } .page-intro p { font-size: 1rem; } }

/* Buttons in the primary colour (Bootstrap .btn variants) */
.btn-vw { --bs-btn-bg: var(--vw-primary); --bs-btn-border-color: var(--vw-primary); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--vw-primary-hover); --bs-btn-hover-border-color: var(--vw-primary-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--vw-primary-hover); --bs-btn-active-color: #fff; }
.btn-vw-outline { --bs-btn-color: var(--vw-primary); --bs-btn-border-color: var(--vw-primary); --bs-btn-hover-bg: var(--vw-primary-soft); --bs-btn-hover-color: var(--vw-primary); --bs-btn-hover-border-color: var(--vw-primary); }
.btn-vw-soft { --bs-btn-bg: var(--vw-primary-soft); --bs-btn-color: var(--vw-primary); --bs-btn-border-color: var(--vw-primary-tint); --bs-btn-hover-bg: var(--vw-primary-tint); --bs-btn-hover-color: var(--vw-primary); --bs-btn-hover-border-color: var(--vw-primary); }
.btn i { margin-right: .3rem; }