.bg-white  {
    background-color: #313145 !important;
}

/* Keep content canvas light */
.content-area .bg-white {
    background-color: #ffffff !important;
}
/* app/assets/stylesheets/dashboard.css */

/* Global layout – keep neutral, Bootstrap will color components */
:root {
    --mode-idle:	#6c757d;	/* gray   */
    --mode-goto:	#28a745;	/* green  */
    --mode-loop:	#9c27b0;	/* purple */
    --mode-hold:	#ff9800;	/* orange */
    --mode-manual:	#dc3545;	/* red    */
}

/* Custom dark theme vars */
[data-bs-theme="dark"] {
    --bs-body-bg: #1a1a1a; /* A darker shade of gray, adjust as needed */
    --bs-nav-tabs-link-active-border-color: rgba(255, 255, 255, 0.6);
}

/* Ensure the body takes the correct background color */
body {
    background-color: var(--bs-body-bg);
}

/* PILL COLORS (based on data-mode on the pill) */
.mode-pill,
#collision-pill,
#collision-pill-max {
    font-size: 0.95rem;
}

.mode-pill[data-mode="IDLE"] {
    background-color: var(--mode-idle);
    color: #fff;
}

.mode-pill[data-mode="GOTO"] {
    background-color: var(--mode-goto);
    color: #fff;
}

.mode-pill[data-mode="LOOP"] {
    background-color: var(--mode-loop);
    color: #fff;
}

.mode-pill[data-mode="HOLD"] {
    background-color: var(--mode-hold);
    color: #000;
}

.mode-pill[data-mode="MANUAL"] {
    background-color: var(--mode-manual);
    color: #fff;
}

/* base look for all mode buttons */
.mode-btn {
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
    color: inherit;
    box-shadow: none;
    font-weight: 600;
}

/* keep border visible on hover/focus/active */
.mode-btn:hover,
.mode-btn:focus,
.mode-btn:active,
.mode-btn.active {
    border-color: currentColor;		/* keep same color */
    background-image: none;			/* cancel bootstrap gradients */
    box-shadow: none;
}

/* STATIC COLORS PER BUTTON TYPE (match the pills) */
.mode-btn-idle {
    border-color: var(--mode-idle);
    color: var(--mode-idle);
}

.mode-btn-goto {
    border-color: var(--mode-goto);
    color: var(--mode-goto);
}

.mode-btn-loop {
    border-color: var(--mode-loop);
    color: var(--mode-loop);
}

.mode-btn-hold {
    border-color: var(--mode-hold);
    color: var(--mode-hold);
}

/* No active-fill state — the mode pill already shows the current mode */

/* Device power toggles */
.device-toggle-btn {
    border: 1px solid #ccc;
    border-radius: 999px;
    padding: 4px 10px;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.device-toggle-btn svg {
    width: 18px;
    height: 18px;
    fill: #9e9e9e; /* OFF = gray */
}

.device-toggle-btn.device-on {
    border-color: #4cff50;
}

.device-toggle-btn.device-on svg {
    fill: #4cff50; /* ON = green */
}

.device-toggle-btn.device-on span {
    color: #4cff50; /* ON = green */
}

/* SIM / ONLINE status buttons – visually similar to device toggles */
.status-mode-btn {
    border: 1px solid #ccc;
    border-radius: 999px;
    padding: 4px 10px;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.status-mode-btn svg {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, 0.6);
}

/* “On” state – green border + green icon + text */
.status-mode-btn[data-active="true"] {
    border-color: #4cff50;
}

.status-mode-btn[data-active="true"] svg {
    fill: #4cff50;
}

.status-mode-btn[data-active="true"] span {
    color: #4cff50;
}

/* Cards */
.card {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
}

/* Navbar logo */
.logo-img {
    height: 40px;
    width: auto;
}

/* Accordion: same background open / closed, but use Bootstrap text colors */
.accordion-button {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: none;
}

/* Draggable waypoint rows */
#waypoints-tbody tr[draggable="true"] {
    cursor: move;
}

/* Map cursor */
#map {
    cursor: crosshair;
}

/* Small helper for theme selector */
.theme-select {
    max-width: 140px;
}

/* ===== Battery (navbar) ===== */
.nav-battery-wrapper{
    display:inline-flex;
    align-items:center;
    cursor:pointer;
}

/* Hide Bootstrap caret on the dropdown toggle */
.nav-battery-wrapper.dropdown-toggle::after{
    display:none !important;
}

.battery-icon{
    position:relative;
    width:56px;
    height:26px;
    border-radius:4px;
    border:2px solid rgba(255,255,255,0.70); /* looks better on bg-dark */
    box-sizing:content-box;
    margin-right:6px;
}

/* the little battery nub */
.battery-icon::after{
    content:"";
    position:absolute;
    top:8px;
    right:-5px;
    width:4px;
    height:8px;
    border-radius:1px;
    background:rgba(255,255,255,0.70);
}

/* fill bar */
.battery-fill{
    height:100%;
    width:0%;
    transition:width 0.3s ease, background-color 0.3s ease;
}

/* percent overlay – centered so it never collides with the bolt */
.battery-pct{
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    line-height:1;
    pointer-events:none;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.65);
    user-select:none;
    padding-left:3px;
    padding-right:3px;
}

/* when the bolt is visible, shift pct text left to make room */
.battery-bolt:not([style*="none"]) ~ .battery-pct{
    padding-right:14px;
}

/* charging bolt overlay */
.battery-bolt{
    position:absolute;
    right:2px;
    top:5px;
    z-index:3;
    font-size:14px;
    line-height:1;
    pointer-events:none;

    /* Force *text* rendering (prevents yellow emoji on many systems) */
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.65);
    user-select:none;
}

/* Optional: slightly dim when offline */
#powerDropdown.is-offline .battery-icon{
    opacity:0.55;
}

#wp-heading .accordion-button { align-items: center; }

#wp-heading .wp-titlebar{
    display:flex;
    align-items:center;
    flex: 1 1 auto;
    gap: .5rem;
    min-width:0;
    flex-wrap: nowrap;          /* key */
}

.waypoint-row.is-active {
    border-left: 2px solid #0d6efd;   /* Bootstrap primary */
    outline-offset: -2px;
}

#nav-route-dropdown { flex: 0 0 auto; }
#nav-route-dropdown-btn { white-space: nowrap; }

#nav-route-send-btn { white-space: nowrap; }  /* key */

#nav-route-count{
    white-space: nowrap;
    margin-left: auto;          /* push count to right */
    margin-right: 10px;
}

/* If your dropdown menu gets clipped by accordion header */
#nav-route-dropdown { position: relative; }
#nav-route-dropdown .dropdown-menu { z-index: 1080; }
#nav-route-sync-pill { white-space: nowrap; }
.wp-drag-handle:active { cursor: grabbing !important; }
/* OP REGIONS (mirror nav_routes styling) */
.op-titlebar{
    display:flex;
    align-items:center;
    gap:0.5rem;
    width:100%;
}

#op-region-dropdown { flex: 0 0 auto; position: relative; }
#op-region-dropdown-btn { white-space: nowrap; }

#op-region-send-btn { white-space: nowrap; }  /* key */
#op-region-sync-pill { white-space: nowrap; }

#op-region-count{
    white-space: nowrap;
    margin-left: auto;          /* push count to right */
    margin-right: 10px;
}

/* If dropdown menu gets clipped by accordion header */
#op-region-dropdown .dropdown-menu { z-index: 1080; }

.wp-icon-btn {
    padding: 0 6px;
    min-width: auto;
    line-height: 1;
    font-size: 0.9rem;
    border: none;
    background: none;
    opacity: 0.7;
}

.wp-icon-btn:hover {
    opacity: 1;
}

.wp-icon-btn.active {
    opacity: 1;
    color: #ffc107;
}

.op-region-icon-btn {
    padding: 0 6px;
    min-width: auto;
    line-height: 1;
    font-size: 0.9rem;
    border: none;
    background: none;
    opacity: 0.7;
}

.op-region-icon-btn:hover {
    opacity: 1;
}

.op-region-icon-btn.active {
    opacity: 1;
    color: #ffc107;
}

.detour-pill {
    background-color: #0dcaf0;
    color: #000;
}

.low-power-pill {
    background-color: #dc3545;
    color: #fff;
    animation: sfrPulse 1.1s infinite;
}

.power-conserve-pill {
    background-color: #fd7e14;
    color: #fff;
    animation: sfrPulse 1.1s infinite;
}

#collision-pill,
#collision-pill-max {
    animation: sfrPulse 1.1s infinite;
}

@keyframes sfrPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.60); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.00); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.00); }
}

#battery-indicator.is-offline {
    opacity: 0.35;
    filter: grayscale(1);
}

/* Light theme: your dropdown toggle should NOT be outline-light */
[data-bs-theme="light"] #nav-route-dropdown-btn.btn-outline-light {
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* Same for op-region button if it's similar */
[data-bs-theme="light"] #op-region-dropdown-btn.btn-outline-light {
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* ===== Maximized Map ===== */
.map-card-maximized {
    position: fixed !important;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

.map-card-maximized .card-body {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0;
}

.map-card-maximized #map {
    height: 100% !important;
    min-height: 0 !important;
}

.map-maximize-btn {
    color: var(--bs-body-color);
    opacity: 0.6;
    text-decoration: none !important;
    line-height: 1;
}

.map-maximize-btn:hover {
    opacity: 1;
}

#map-maximized-toolbar {
    background-color: var(--bs-body-bg);
}

/* Mode buttons in toolbar need the current-mode context for active highlighting */
#map-maximized-toolbar .mode-buttons {
    display: inline-flex;
}

/* Collapsible card toggle (Navigation State header) */
.sf-collapse-toggle {
    color: var(--bs-card-color, inherit);
    cursor: pointer;
}
.sf-collapse-toggle:focus {
    outline: none;
    box-shadow: none;
}
.sf-collapse-chevron {
    flex-shrink: 0;
    transition: transform 200ms ease;
    transform: rotate(180deg); /* up = expanded (default) */
}
.sf-collapse-toggle[aria-expanded="false"] .sf-collapse-chevron {
    transform: rotate(0deg); /* down = collapsed */
}

/* home.css (LIGHT-ONLY): CSS owns transforms; JS toggles is-active + is-reveal-* on .sf-story-bg */

:root{
    --sf-text: rgba(0,0,0,0.92);
    --sf-muted: rgba(0,0,0,0.70);
    --sf-dim: rgba(0,0,0,0.55);
    --sf-card: rgba(0,0,0,0.04);
    --sf-border: rgba(0,0,0,0.10);
    --sf-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

/* Story container */
.sf-story-bg{
    width: 100%;
    margin: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: clip;
}

/* Background stack (fixed) */
.sf-bg-stack{
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Background layers */
.sf-bg-layer{
    position: absolute;
    inset: 0;

    /* for image layers */
    background-size: cover;
    background-position: center;

    opacity: 0;

    --sf-tx: 0px;
    --sf-ty: 0px;
    --sf-scale: 1;

    transform: translate3d(var(--sf-tx), var(--sf-ty), 0) scale(var(--sf-scale));
    transition: opacity 700ms ease, transform 1100ms ease;
    will-change: opacity, transform;
}

.sf-bg-layer.is-active{ opacity: 1; }

/* Directional reveal (JS toggles these on .sf-story-bg) */
.sf-story-bg.is-reveal-left  .sf-bg-layer.is-active{ --sf-tx: -12px; }
.sf-story-bg.is-reveal-right .sf-bg-layer.is-active{ --sf-tx:  12px; }
.sf-story-bg.is-reveal-up    .sf-bg-layer.is-active{ --sf-ty:  12px; }
.sf-story-bg.is-reveal-down  .sf-bg-layer.is-active{ --sf-ty: -12px; }

/* Light-mode scrim for readability */
.sf-bg-scrim{
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
            radial-gradient(900px 600px at 35% 18%, rgba(255,255,255,0.18), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.40));
}

/* Foreground above background */
.sf-fg{ position: relative; z-index: 2; }
.navbar.sticky-top{ z-index: 1100; }

/* Content-height panels */
.sf-panel{
    min-height: 100svh; /* keep your current behavior */
    display: block;
    padding: 72px 18px;
}

.sf-panel[data-sf-bg-key="hero"]{
    padding-top: 140px;
    padding-bottom: 120px;
}

/* spacer between panels */
.sf-panel::after{
    content: "";
    display: block;
    height: 16vh;
}

/* =========================
   HERO VIDEO BACKGROUND
   ========================= */

/* The layer that contains the video should not have a background image */
.sf-bg-layer--video{
    background: none !important;
    overflow: hidden; /* important: keep cover edges clean during transforms */
}

/* Let the PARENT layer own transforms; the video should just cover */
.sf-hero-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    /* IMPORTANT: no transform here (prevents double-zoom / blinking) */
    transform: none !important;
}

/* Reduced motion: stop showing the moving background */
@media (prefers-reduced-motion: reduce){
    .sf-bg-layer--video .sf-hero-video{ display: none; }
    /* poster will still show via <video poster="..."> as a fallback in many browsers */
}

/* Copy block */
.sf-copy-wrap{
    max-width: 860px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: var(--sf-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.sf-copy-wrap--left{ margin-right: auto; }
.sf-copy-wrap--right{ margin-left: auto; }

.sf-kicker{
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sf-dim);
    margin-bottom: 10px;
}
.sf-h1{
    font-size: 44px;
    line-height: 1.08;
    margin: 0 0 12px 0;
    color: var(--sf-text);
}
.sf-h2{
    font-size: 28px;
    line-height: 1.18;
    margin: 0 0 10px 0;
    color: var(--sf-text);
}
.sf-lead{
    font-size: 18px;
    line-height: 1.55;
    color: var(--sf-muted);
}
.sf-panel p{
    font-size: 16px;
    line-height: 1.6;
    color: var(--sf-muted);
}

/* Buttons */
.sf-cta{ display:flex; gap:10px; margin-top: 16px; flex-wrap: wrap; }
.sf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.14);
    text-decoration:none;
    color: var(--sf-text);
    background: rgba(0,0,0,0.04);
}
.sf-btn--primary{
    background: rgba(2,119,189,0.14);
    border-color: rgba(2,119,189,0.25);
}
.sf-btn--contact-submit{
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.35);
    cursor: not-allowed;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sf-btn--contact-submit.is-ready{
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
    cursor: pointer;
}

/* Lists/cards */
.sf-list{ margin: 12px 0 0 0; padding-left: 18px; }
.sf-list li{ margin: 7px 0; }

.sf-note{
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.10);
}

.sf-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}
@media (max-width: 980px){
    .sf-grid{ grid-template-columns: 1fr; }
}
.sf-card{
    background: var(--sf-card);
    border: 1px solid var(--sf-border);
    border-radius: 16px;
    padding: 14px;
}
.sf-card__title{ font-weight: 650; margin-bottom: 6px; color: var(--sf-text); }
.sf-card__body{ color: var(--sf-muted); font-size: 14px; line-height: 1.45; }

.sf-panel--final{ border-bottom: none; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */