/* =============================================================================
 * gpscom Bottom-bar V2 — Floating cards over the map
 *   - Panel itself is transparent (no bar)
 *   - Left "rail": stacked card-buttons  [×]  [⚙]  [Main] [Events] [Reminders] [Notes]
 *   - Each widget is a separate floating card with a soft gray header
 *   - × on rail = minimize all → leaves a single round floating "+" restore button
 *   - Per-widget × on hover = hide that widget; restore via "+ Add widget (N)" chip
 * All classes namespaced .bb2-* so the classic UI is 100% unaffected.
 * ========================================================================== */

:root {
    --bb2-radius:       14px;
    --bb2-radius-sm:    10px;
    --bb2-shadow-card:  0 10px 28px -8px rgba(15,23,42,.22), 0 2px 6px -2px rgba(15,23,42,.10);
    --bb2-shadow-soft:  0 6px 18px -8px rgba(15,23,42,.18), 0 1px 3px -1px rgba(15,23,42,.08);
    --bb2-shadow-pop:   0 16px 40px -8px rgba(15,23,42,.28), 0 4px 12px -4px rgba(15,23,42,.12);
    --bb2-border:       #e2e8f0;
    --bb2-border-soft:  #eef0f3;
    --bb2-head:         #eef2f7;       /* grey title strip background */
    --bb2-head-text:    #1f2a44;
    --bb2-text:         #0f172a;
    --bb2-muted:        #64748b;
    --bb2-faint:        #94a3b8;

    --bb2-accent-main:      #1e293b;   /* slate-dark for the active pill */
    --bb2-accent-events:    #b45309;
    --bb2-accent-reminders: #6d28d9;
    --bb2-accent-notes:     #047857;

    --bb2-ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------------- */
/* Root panel (transparent, just a container for floating cards)             */
/* ------------------------------------------------------------------------- */
#bottom_panel_v2 {
    display: none;
    position: absolute;
    left: 380px;
    right: 12px;
    bottom: 12px;
    z-index: 25;                   /* above #side_panel_dragbar (z-index 20) */
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    color: var(--bb2-text);
    user-select: none;
    pointer-events: none;          /* let map handle gaps between cards */
}
#bottom_panel_v2 > * { pointer-events: auto; }

/* Only show the v2 panel once an object/event/route has data. */
body.bb2-active.bb2-has-data #bottom_panel_v2 { display: block; }

/* Aggressively hide every classic bottom-panel artifact when v2 is active */
body.bb2-active #bottom_panel,
body.bb2-active #bottom_panel_dragbar,
body.bb2-active #bottom_panel_datalist_object_data_list,
body.bb2-active #bottom_panel_datalist_event_data_list,
body.bb2-active #bottom_panel_datalist_route_data_list,
body.bb2-active #bottom_panel_controls,
body.bb2-active .data_load_main {
    display: none !important;
    background: transparent !important;
    visibility: hidden !important;
}

/* History view always uses the classic bottom panel (timeline + graph).
   When body.bb2-history-mode is set the V2 panel hides and the classic
   bottom panel comes back, overriding the rules above.                    */
body.bb2-active.bb2-history-mode #bottom_panel_v2 { display: none !important; }
body.bb2-active.bb2-history-mode #bottom_panel,
body.bb2-active.bb2-history-mode #bottom_panel_dragbar,
body.bb2-active.bb2-history-mode #bottom_panel_datalist_object_data_list,
body.bb2-active.bb2-history-mode #bottom_panel_datalist_event_data_list,
body.bb2-active.bb2-history-mode #bottom_panel_datalist_route_data_list,
body.bb2-active.bb2-history-mode #bottom_panel_controls,
body.bb2-active.bb2-history-mode .data_load_main {
    display: block !important;
    visibility: visible !important;
}
/* Restore the classic dragbar's grey background that the V2 hiding rule
   above set to transparent (needed so the grab handle is actually visible
   when the classic bottom panel reappears in history mode). */
body.bb2-active.bb2-history-mode #bottom_panel_dragbar {
    background: #f5f5f5 !important;
}

/* When minimized, only the floating restore button is visible */
body.bb2-active.bb2-minimized #bottom_panel_v2 .bb2-root { display: none; }
body.bb2-active.bb2-minimized #bottom_panel_v2 .bb2-restore { display: flex; }

/* ------------------------------------------------------------------------- */
/* Root layout: rail + cards row                                             */
/* ------------------------------------------------------------------------- */
.bb2-root {
    display: flex;
    flex-direction: row;
    align-items: flex-end;            /* anchor to the bottom */
    justify-content: flex-end;        /* anchor to the right  */
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

/* ===== Left rail (vertical stack of card-buttons) ===== */
.bb2-rail {
    flex: 0 0 auto;
    width: 92px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-end;        /* stick to the bottom */
}

.bb2-rail-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bb2-rail-btn {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid var(--bb2-border-soft);
    border-radius: var(--bb2-radius);
    box-shadow: var(--bb2-shadow-soft);
    color: var(--bb2-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .18s var(--bb2-ease),
                box-shadow .18s var(--bb2-ease),
                color .18s,
                background .18s;
}
.bb2-rail-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--bb2-shadow-card);
    color: var(--bb2-text);
}
.bb2-rail-btn.bb2-rail-close:hover {
    background: #fee2e2;
    color: #dc2626;
}
/* Push the close button to the right so it clears the sidebar drag-handle */
.bb2-rail-btn.bb2-rail-close { margin-left: 46px; }
.bb2-rail-btn svg { width: 15px; height: 15px; }

/* Tab pill (one card per tab, stacked vertically) */
.bb2-tab {
    height: 42px;
    background: #fff;
    border: 1px solid var(--bb2-border-soft);
    border-radius: var(--bb2-radius-sm);
    box-shadow: var(--bb2-shadow-soft);
    color: var(--bb2-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    transition: transform .18s var(--bb2-ease),
                box-shadow .18s var(--bb2-ease),
                background .18s,
                color .18s,
                border-color .18s;
}
.bb2-tab svg { width: 14px; height: 14px; opacity: .85; }
.bb2-tab .lbl { line-height: 1; }
.bb2-tab:hover {
    transform: translateY(-1px);
    box-shadow: var(--bb2-shadow-card);
}

/* Active tab — dark filled pill (matches the screenshot's Main button) */
.bb2-tab.active {
    background: var(--bb2-tab-active, var(--bb2-accent-main));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--bb2-shadow-card);
}
.bb2-tab.active svg { opacity: 1; }

/* Per-tab active color (override --bb2-tab-active) */
.bb2-tab[data-tab="main"].active      { --bb2-tab-active: #1e293b; }
.bb2-tab[data-tab="events"].active    { --bb2-tab-active: #b45309; }
.bb2-tab[data-tab="reminders"].active { --bb2-tab-active: #6d28d9; }
.bb2-tab[data-tab="notes"].active     { --bb2-tab-active: #047857; }

/* ===== Restore button (visible while minimized) — fixed bottom-right of viewport ===== */
.bb2-restore {
    display: none;            /* shown via body.bb2-minimized */
    position: fixed;
    right: 16px; bottom: 16px;
    width: 44px; height: 44px;
    background: #fff;
    border: 1px solid var(--bb2-border-soft);
    border-radius: 50%;
    box-shadow: var(--bb2-shadow-card);
    color: var(--bb2-accent-main);
    z-index: 999;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .18s var(--bb2-ease), box-shadow .18s var(--bb2-ease);
    animation: bb2-pop .25s var(--bb2-ease);
}
.bb2-restore:hover { transform: translateY(-2px) rotate(45deg); box-shadow: var(--bb2-shadow-pop); }
.bb2-restore svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------------- */
/* Widget cards row — horizontal scroll when too many widgets                */
/* ------------------------------------------------------------------------- */
.bb2-cols {
    flex: 0 1 auto;                   /* hug content, shrink when too wide  */
    min-width: 0;
    max-width: 100%;
    display: flex;                    /* a single scrollable strip          */
    overflow-x: auto;
    overflow-y: visible;              /* let card hover-shadows escape      */
    padding-bottom: 4px;
    scroll-behavior: smooth;

    /* Scrollbar hidden by default — reveals on hover (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .25s ease;
}
.bb2-cols:hover {
    scrollbar-color: rgba(15,23,42,.40) transparent;
}
/* WebKit scrollbar — always laid out (so it never jumps) but visually hidden */
.bb2-cols::-webkit-scrollbar { height: 8px; }
.bb2-cols::-webkit-scrollbar-track { background: transparent; }
.bb2-cols::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 99px;
    transition: background .2s ease;
}
.bb2-cols:hover::-webkit-scrollbar-thumb       { background: rgba(15,23,42,.40); }
.bb2-cols:hover::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.65); }

/* Inner flex row: hugs the right edge until it overflows, then scrolls. */
.bb2-cols-inner {
    display: flex; flex-direction: row;
    gap: 10px;
    align-items: stretch;
    margin-left: auto;                /* right-align when content fits */
}

.bb2-col {
    flex: 0 0 auto;                   /* fixed-size cards, no shrinking */
    width: 230px;                     /* default width, overridden per widget */
    height: 196px;                    /* uniform height — user spec */
    background: #fff;
    border-radius: var(--bb2-radius);
    border: 1px solid var(--bb2-border-soft);
    box-shadow: var(--bb2-shadow-card);
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow .25s var(--bb2-ease), transform .25s var(--bb2-ease);
    animation: bb2-cardIn .32s var(--bb2-ease) both;
}
.bb2-col:hover { box-shadow: var(--bb2-shadow-pop); }

/* Soft grey title strip on top */
.bb2-col-head {
    display: flex; align-items: center; justify-content: center;
    padding: 6px 46px 6px 10px;       /* extra right pad for fs + × buttons */
    background: var(--bb2-head);
    border-bottom: 1px solid var(--bb2-border-soft);
    flex-shrink: 0;
    position: relative;
    min-height: 28px;
}
.bb2-col-head .bb2-col-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--bb2-head-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: center;
    width: 100%;
}
.bb2-col-x,
.bb2-col-fs {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    border: none; background: transparent;
    color: var(--bb2-faint);
    border-radius: 6px; cursor: pointer;
    opacity: 0;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .2s, background .15s, color .15s;
}
.bb2-col-fs { right: 28px; }
.bb2-col-x  { right: 6px;  }
.bb2-col:hover .bb2-col-x,
.bb2-col:hover .bb2-col-fs { opacity: 1; }
.bb2-col-fs:hover { background: #e0e7ff; color: #4338ca; }
.bb2-col-x:hover  { background: #fee2e2; color: #dc2626; }

/* Drag-and-drop reordering ----------------------------------------------- */
.bb2-col-head.bb2-drag-handle { cursor: grab; }
.bb2-col-head.bb2-drag-handle:active { cursor: grabbing; }
.bb2-col.bb2-dragging { opacity: 0.4; }
/* Vertical drop indicator on the side where the dragged widget will land.
   Drawn inside the col bounds because .bb2-col has overflow:hidden.        */
.bb2-col.bb2-drop-before::before,
.bb2-col.bb2-drop-after::after {
    content: '';
    position: absolute;
    top: 4px; bottom: 4px;
    width: 3px;
    background: #4338ca;
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
}
.bb2-col.bb2-drop-before::before { left: 0; }
.bb2-col.bb2-drop-after::after   { right: 0; }
.bb2-col-x svg, .bb2-col-fs svg { width: 11px; height: 11px; }

.bb2-col-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 12px 10px;
    overflow: hidden;
}

/* Per-widget widths — all 196 px tall, widths tuned to content */
.bb2-col.w-object   { width: 210px; }
.bb2-col.w-info     { width: 240px; }
.bb2-col.w-chart    { width: 230px; }     /* smaller mileage card */
.bb2-col.w-list     { width: 240px; }
.bb2-col.w-notes    { width: 230px; }
.bb2-col.w-services { width: 240px; }
.bb2-col.w-control  { width: 240px; }
.bb2-col.w-position { width: 270px; }
.bb2-col.w-vehicle  { width: 270px; }
.bb2-col.w-photo    { width: 170px; }
.bb2-col.w-street   { width: 200px; }
.bb2-col.w-sensors  { width: 220px; }

@media (max-width: 1500px) { .bb2-col[data-hide="1500"] { display: none; } }
@media (max-width: 1320px) { .bb2-col[data-hide="1320"] { display: none; } }
@media (max-width: 1150px) { .bb2-col[data-hide="1150"] { display: none; } }
@media (max-width: 1000px) { .bb2-col[data-hide="1000"] { display: none; } }

/* Sidebar collapsed → widgets gain back the left margin                     */
body.bb2-side-hidden #bottom_panel_v2 { left: 12px; }

/* On narrow screens cards stay fixed-width and scroll horizontally instead */
@media (max-width: 900px) {
    #bottom_panel_v2 { left: 12px; }
}

@keyframes bb2-cardIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes bb2-pop {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: scale(1);  }
}
.bb2-col:nth-child(1) { animation-delay: 0ms; }
.bb2-col:nth-child(2) { animation-delay: 55ms; }
.bb2-col:nth-child(3) { animation-delay: 110ms; }
.bb2-col:nth-child(4) { animation-delay: 165ms; }

/* ------------------------------------------------------------------------- */
/* "+ Add widget" chip & popover                                             */
/* ------------------------------------------------------------------------- */
.bb2-add-chip {
    align-self: center;
    margin: 0 4px;
    height: 38px;
    padding: 0 14px;
    background: #fff;
    color: #475569;
    border: 1px dashed #94a3b8;
    border-radius: 99px;
    cursor: pointer;
    font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
    box-shadow: var(--bb2-shadow-soft);
    transition: background .15s, border-color .15s, transform .15s, color .15s;
}
.bb2-add-chip:hover {
    background: #eef2ff; border-color: #6366f1;
    color: #4338ca; transform: translateY(-1px);
}
.bb2-add-chip svg { width: 13px; height: 13px; }

.bb2-popover {
    position: absolute;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--bb2-shadow-pop);
    border: 1px solid var(--bb2-border);
    padding: 8px;
    min-width: 240px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 1100;
    transform-origin: bottom right;
    animation: bb2-popIn .18s var(--bb2-ease) both;
}
@keyframes bb2-popIn {
    from { opacity: 0; transform: scale(.92) translateY(6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);   }
}
.bb2-popover h4 {
    margin: 4px 8px 6px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--bb2-muted); font-weight: 700;
}
.bb2-popover h4:not(:first-child) { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--bb2-border-soft); }
.bb2-popover .row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--bb2-text);
    transition: background .12s;
}
.bb2-popover .row:hover { background: #f1f5f9; }
.bb2-popover .row input { accent-color: #4f46e5; }
.bb2-popover .footer {
    margin-top: 4px;
    border-top: 1px solid var(--bb2-border-soft);
    padding: 6px 8px 2px;
    display: flex; justify-content: space-between;
}
.bb2-popover .footer button {
    background: transparent; border: none; cursor: pointer;
    font-size: 11.5px; font-weight: 600; color: #4f46e5;
    padding: 4px 6px; border-radius: 4px;
}
.bb2-popover .footer button:hover { background: #eef2ff; }

/* ------------------------------------------------------------------------- */
/* Widget — Object summary (speedometer card)                                */
/* The speedometer canvas now owns the entire card surface; the status      */
/* indicator lives in the Information widget and the odometer is baked      */
/* into the canvas itself.                                                  */
/* ------------------------------------------------------------------------- */
.bb2-obj {
    display: flex; flex-direction: column; align-items: stretch;
    justify-content: stretch;
    height: 100%; padding: 0;
    /* Critical: cap so canvas never overflows the fixed-height card */
    overflow: hidden;
}
.bb2-speedo {
    display: block;
    width: 100%;
    height: 100%;
    /* No min-height — must follow the parent so the bottom readout
       pill stays inside the .bb2-col card (which is overflow:hidden). */
}

/* Status row inside the Information widget — coloured dot + label */
.bb2-info-row[data-k="status"] .tick {
    background: #f1f5f9;
}
.bb2-info-row[data-k="status"] .tick::before {
    background: #cbd5e1;
}
.bb2-info-row.bb2-status-online .tick {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}
.bb2-info-row.bb2-status-online .tick::before {
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22,163,74,.22);
    animation: bb2-pulse 1.6s ease-in-out infinite;
}
.bb2-info-row.bb2-status-online .bb2-v {
    color: #16a34a;
}
.bb2-info-row.bb2-status-offline .tick { background: #f1f5f9; }
.bb2-info-row.bb2-status-offline .tick::before { background: #94a3b8; }
.bb2-info-row.bb2-status-offline .bb2-v { color: #94a3b8; }
@keyframes bb2-pulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(22,163,74,.22); }
    50%     { box-shadow: 0 0 0 5px rgba(22,163,74,.06); }
}

/* ------------------------------------------------------------------------- */
/* Widget — Information rows                                                 */
/* ------------------------------------------------------------------------- */
.bb2-info-rows { display: flex; flex-direction: column; gap: 2px; }
.bb2-info-row {
    display: grid;
    grid-template-columns: 20px 80px 1fr;
    align-items: center;
    padding: 3px 2px;
    border-radius: 5px;
    transition: background .15s, opacity .2s, max-height .25s;
}
.bb2-info-row.bb2-empty { display: none; }   /* dynamic: hide rows w/ no data */
.bb2-info-row .tick {
    width: 14px; height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
}
.bb2-info-row .tick::before { content:''; width:6px; height:6px; border-radius:50%; background:#16a34a; }
.bb2-info-row.dim .tick { background: #f1f5f9; }
.bb2-info-row.dim .tick::before { background: #cbd5e1; }
.bb2-info-row .bb2-k {
    font-size: 11.5px;
    color: var(--bb2-muted);
    font-weight: 500;
}
.bb2-info-row .bb2-v {
    font-size: 11.5px;
    color: var(--bb2-text);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb2-info-row.dim .bb2-v { color: var(--bb2-faint); font-weight: 500; }

/* ------------------------------------------------------------------------- */
/* Flash on numeric change                                                   */
/* ------------------------------------------------------------------------- */
@keyframes bb2-flash-up   { 0% { background: rgba(34,197,94,.35);  } 100% { background: transparent; } }
@keyframes bb2-flash-down { 0% { background: rgba(239,68,68,.30);  } 100% { background: transparent; } }
.bb2-flash-up   { animation: bb2-flash-up   .9s var(--bb2-ease); }
.bb2-flash-down { animation: bb2-flash-down .9s var(--bb2-ease); }

/* ------------------------------------------------------------------------- */
/* Widget — Weekly mileage chart                                             */
/* ------------------------------------------------------------------------- */
.bb2-chart-host {
    display: flex; flex-direction: column;
    height: 100%;
}
.bb2-chart-host canvas {
    flex: 1 1 auto;
    width: 100%;
    min-height: 56px;
}
.bb2-chart-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--bb2-border-soft);
    margin-top: 4px;
    font-size: 8.5px;
    color: var(--bb2-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}
.bb2-chart-stats div { display: flex; flex-direction: column; gap: 2px; }
.bb2-chart-stats b { font-size: 11.5px; color: var(--bb2-text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------- */
/* Widget — Generic list                                                     */
/* ------------------------------------------------------------------------- */
.bb2-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    height: 100%;
}
.bb2-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px dashed var(--bb2-border-soft);
    font-size: 11.5px;
}
.bb2-list li:last-child { border-bottom: none; }
.bb2-list .bb2-k { color: var(--bb2-muted); font-weight: 500; }
.bb2-list .bb2-v {
    color: var(--bb2-text); font-weight: 700;
    font-variant-numeric: tabular-nums;
    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: right;
}

.bb2-list .event-row {
    flex-direction: column; align-items: stretch;
    gap: 3px;
    padding: 8px 0;
}
.bb2-list .event-row .top {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--bb2-text); font-weight: 600;
}
.bb2-list .event-row .bot {
    font-size: 11px; color: var(--bb2-muted);
}
.bb2-list .event-row .badge {
    font-size: 9.5px; padding: 2px 7px; border-radius: 99px;
    text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700;
}
.bb2-list .event-row .badge.info    { background: #dbeafe; color: #1d4ed8; }
.bb2-list .event-row .badge.warn    { background: #fef3c7; color: #92400e; }
.bb2-list .event-row .badge.danger  { background: #fee2e2; color: #b91c1c; }

/* List variant with leading icon column (matches classic _wRow output). */
.bb2-list.bb2-list-icons {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    /* Allow the body itself to scroll; cancel inherited flex centring */
    height: 100%;
    display: block;
}
.bb2-list.bb2-list-icons::-webkit-scrollbar { width: 6px; }
.bb2-list.bb2-list-icons::-webkit-scrollbar-track { background: transparent; }
.bb2-list.bb2-list-icons::-webkit-scrollbar-thumb {
    background: #cbd5e1; border-radius: 99px;
}
.bb2-list.bb2-list-icons::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.bb2-list.bb2-list-icons li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 0;
    align-items: center;
    padding: 5px 8px;
    margin: 0;
    border: none;
    border-radius: 6px;
    line-height: 1.2;
    transition: background .12s ease;
}
.bb2-list.bb2-list-icons li:nth-child(odd)  { background: #f8fafc; }
.bb2-list.bb2-list-icons li:nth-child(even) { background: transparent; }
.bb2-list.bb2-list-icons li:hover { background: #eef2ff; }

.bb2-list.bb2-list-icons .widget-row-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: inline-block;
    width: 20px; height: 20px;
    background-position: center; background-repeat: no-repeat; background-size: 16px 16px;
    opacity: 0.85;
    align-self: center;
}
.bb2-list.bb2-list-icons .bb2-k {
    grid-column: 2;
    grid-row: 1;
    display: block;
    color: var(--bb2-muted);
    font-weight: 500;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
}
.bb2-list.bb2-list-icons .bb2-v {
    grid-column: 2;
    grid-row: 2;
    color: var(--bb2-text);
    font-weight: 600;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: left;
}

.bb2-list .bb2-empty-row {
    border: none !important;
    justify-content: center !important;
    color: var(--bb2-muted);
    padding: 12px 0 !important;
    font-style: italic;
    background: transparent !important;
    display: flex !important;
}

/* Events list — modern table-like rows, scrollable */
.bb2-list.bb2-events-list {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    height: 100%;
    display: block;
}
.bb2-list.bb2-events-list::-webkit-scrollbar { width: 6px; }
.bb2-list.bb2-events-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.bb2-list.bb2-events-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.bb2-list.bb2-events-list li.event-row {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 8px;
    align-items: flex-start;
    padding: 7px 6px;
    margin: 0;
    border: none;
    border-radius: 6px;
    font-size: 11.5px;
    line-height: 1.3;
    transition: background .12s ease;
}
.bb2-list.bb2-events-list li.event-row:nth-child(odd)  { background: #f8fafc; }
.bb2-list.bb2-events-list li.event-row:hover           { background: #eef2ff; }

.bb2-list.bb2-events-list .ev-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    background: #3b82f6;
    flex: 0 0 8px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.bb2-list.bb2-events-list .event-warn   .ev-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.bb2-list.bb2-events-list .event-danger .ev-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }

.bb2-list.bb2-events-list .ev-text {
    display: flex; flex-direction: column;
    min-width: 0;
}
.bb2-list.bb2-events-list .ev-name {
    color: var(--bb2-text);
    font-weight: 600;
    font-size: 11.5px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.bb2-list.bb2-events-list .ev-time {
    color: var(--bb2-muted);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

/* ------------------------------------------------------------------------- */
/* Widget — Services with progress                                           */
/* ------------------------------------------------------------------------- */
.bb2-svc { margin-bottom: 8px; }
.bb2-svc:last-child { margin-bottom: 0; }
.bb2-svc .head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px;
}
.bb2-svc .name { font-size: 12.5px; color: var(--bb2-text); font-weight: 600; }
.bb2-svc .pct  { font-size: 11.5px; color: var(--bb2-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.bb2-svc .bar  { height: 6px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
.bb2-svc .bar > div {
    height: 100%;
    background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
    border-radius: 99px;
    transition: width .5s var(--bb2-ease);
}
.bb2-svc.warn   .bar > div { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.bb2-svc.danger .bar > div { background: linear-gradient(90deg, #f87171, #ef4444); }

/* ------------------------------------------------------------------------- */
/* Widget — Street / Photo                                                   */
/* ------------------------------------------------------------------------- */
.bb2-street { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.bb2-street img {
    width: 100%;
    flex: 1 1 auto;
    object-fit: cover;
    border-radius: 8px;
    background: #f1f5f9;
    min-height: 0;
}
.bb2-street .meta { font-size: 11px; color: var(--bb2-muted); text-align: center; }

/* ------------------------------------------------------------------------- */
/* Widget — Notes                                                            */
/* ------------------------------------------------------------------------- */
.bb2-notes {
    display: flex; flex-direction: column;
    height: 100%; gap: 6px;
}
.bb2-notes textarea {
    flex: 1 1 auto;
    width: 100%;
    resize: none;
    border: 1px solid var(--bb2-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--bb2-text);
    background: #fafbfc;
    outline: none;
    transition: border-color .15s, background .15s;
}
.bb2-notes textarea:focus { border-color: #6366f1; background: #fff; }
.bb2-notes .row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--bb2-muted);
}
.bb2-notes button {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff; border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.bb2-notes button:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ------------------------------------------------------------------------- */
/* Widget — Object Control (template selector + GPRS command sender)         */
/* ------------------------------------------------------------------------- */
.bb2-ctrl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    overflow-y: auto;
}
.bb2-ctrl .empty {
    color: var(--bb2-faint);
    font-size: 12px;
    text-align: center;
    padding: 14px 0;
}
.bb2-ctrl .bb2-ctrl-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bb2-muted);
    font-weight: 600;
    margin-top: 2px;
}
.bb2-ctrl .bb2-ctrl-select,
.bb2-ctrl .bb2-ctrl-input {
    width: 100%;
    padding: 6px 8px;
    font-size: 11.5px;
    background: #fff;
    border: 1px solid var(--bb2-border-soft);
    border-radius: 6px;
    color: var(--bb2-text);
    outline: none;
    box-sizing: border-box;
}
.bb2-ctrl .bb2-ctrl-select:focus,
.bb2-ctrl .bb2-ctrl-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}
.bb2-ctrl .bb2-ctrl-send {
    margin-top: 4px;
    padding: 7px 10px;
    font-size: 11.5px; font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.bb2-ctrl .bb2-ctrl-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bb2-ctrl .bb2-ctrl-send:active { transform: translateY(0); }

/* ------------------------------------------------------------------------- */
/* Floating style switcher — hidden (moved into Settings modal)              */
/* ------------------------------------------------------------------------- */
.bb2-switcher { display: none !important; }
.bb2-switcher-legacy {
    position: fixed;
    right: 12px; bottom: 12px;
    z-index: 999;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--bb2-border-soft);
    border-radius: 99px;
    padding: 4px 6px 4px 12px;
    box-shadow: var(--bb2-shadow-soft);
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--bb2-muted); font-weight: 600;
    transition: transform .15s var(--bb2-ease), box-shadow .15s var(--bb2-ease);
}
.bb2-switcher:hover { transform: translateY(-1px); box-shadow: var(--bb2-shadow-card); }
.bb2-switcher b { font-weight: 700; color: var(--bb2-text); font-size: 11px; letter-spacing: 0.3px; }
.bb2-switcher .seg { display: flex; background: #f1f5f9; border-radius: 99px; padding: 2px; }
.bb2-switcher .seg button {
    border: none; background: transparent;
    padding: 5px 12px;
    font-size: 11px; font-weight: 600; color: var(--bb2-muted);
    cursor: pointer; border-radius: 99px;
    transition: background .15s, color .15s;
}
.bb2-switcher .seg button.active {
    background: #fff; color: var(--bb2-text);
    box-shadow: 0 1px 3px rgba(15,23,42,.10);
}

/* ---------------------------------------------------------------------------
 * Full-size variants used inside the .wd-modal (fullscreen V2 widgets).
 * They keep the row design (icons / event dots) but use larger metrics so the
 * data is comfortable to read in a wide modal.
 * ------------------------------------------------------------------------- */
.wd-body .bb2-list.wd-fullsize {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 6px 8px;
    max-height: 460px;
    overflow-y: auto;
    height: auto;
    display: block;
}
.wd-body .bb2-list.bb2-list-icons.wd-fullsize li {
    grid-template-columns: 22px 1fr auto;
    gap: 12px;
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 8px;
}
.wd-body .bb2-list.bb2-list-icons.wd-fullsize .widget-row-icon {
    width: 20px; height: 20px; background-size: 18px 18px;
}
.wd-body .bb2-list.bb2-list-icons.wd-fullsize .bb2-k {
    font-size: 12px;
}
.wd-body .bb2-list.bb2-list-icons.wd-fullsize .bb2-v {
    font-size: 13.5px;
    max-width: 60%;
}
.wd-body .bb2-list.bb2-events-list.wd-fullsize li.event-row {
    grid-template-columns: 12px 1fr;
    gap: 12px;
    padding: 10px 10px;
    font-size: 13px;
}
.wd-body .bb2-list.bb2-events-list.wd-fullsize .ev-dot {
    width: 10px; height: 10px; margin-top: 6px;
}
.wd-body .bb2-list.bb2-events-list.wd-fullsize .ev-name { font-size: 13.5px; }
.wd-body .bb2-list.bb2-events-list.wd-fullsize .ev-time { font-size: 12px; }

/* Section header used inside the V2 fullscreen modals */
.wd-body .wd-section { margin-top: 16px; }
.wd-body .wd-section > h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}