/* Modernized device widget — clean label→value rows (Address / Time / Stop / Driver),
   with the address-reveal eye inline on the address row. Scoped to
   #widgets .widget-device so it never touches other widgets. */

#widgets .widget-device.dw {
    width: 440px;
    max-width: 440px;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-bottom: 0;
    vertical-align: bottom;
    white-space: normal;
    font-size: 12px;
}

#widgets .widget-device.dw .dw-head { padding: 0 14px; border-bottom: 1px solid #eef0f3; gap: 8px; }
#widgets .widget-device.dw .dw-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
#widgets .widget-device.dw .dw-ic {
    width: 32px; height: 32px; border-radius: 8px; flex: none;
    /* theme accent (var(--demo-blue) is set to the theme colour), not hardcoded blue */
    background: color-mix(in srgb, var(--demo-blue) 12%, #fff); color: var(--demo-blue);
    display: flex; align-items: center; justify-content: center;
}
#widgets .widget-device.dw .dw-ic .icon { font-size: 17px; }
#widgets .widget-device.dw .dw-name {
    font-size: 13px; font-weight: 600; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* status dot — background color is set inline by device.js; text hidden */
#widgets .widget-device.dw .dw-status {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    font-size: 0; line-height: 0; overflow: hidden; flex: none;
}

#widgets .widget-device.dw .dw-body { padding: 0 14px 6px; overflow: hidden; }

#widgets .widget-device.dw .dw-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid #f1f3f5; min-width: 0;
}
#widgets .widget-device.dw .dw-row:last-child { border-bottom: 0; }
#widgets .widget-device.dw .dw-k {
    width: 104px; flex: none; font-weight: 600; color: #1f2937;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Value cells. device.js regenerates each <span data-device> on every update
   and drops CSS classes, so target them by attribute (survives regeneration). */
#widgets .widget-device.dw .dw-v,
#widgets .widget-device.dw .dw-row > [data-device] {
    flex: 1; min-width: 0; color: #374151;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Address row: value always wraps to two lines (full address visible) + actions */
#widgets .widget-device.dw .dw-row--addr { align-items: flex-start; }
#widgets .widget-device.dw .dw-address,
#widgets .widget-device.dw .dw-row--addr > [data-device="address"] {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    text-overflow: clip; overflow: hidden; line-height: 1.35; max-height: 2.7em;
}
#widgets .widget-device.dw .dw-addr-acts { display: flex; align-items: center; gap: 4px; flex: none; }
#widgets .widget-device.dw .dw-mini {
    width: 26px; height: 26px; border: 1px solid #e6e8ec; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #6b7280; font-size: 12px; text-decoration: none;
}
#widgets .widget-device.dw .dw-mini:hover { background: #f3f5f8; color: #1f2937; }
#widgets .widget-device.dw .dw-eye .icon { font-size: 13px; }

/* ── Equal-height cards, aligned 46px headers, no inner scroll (all widgets) ── */
#widgets .widgets-content { display: flex; align-items: stretch; }
#widgets .widget { height: auto; display: flex; flex-direction: column; flex: none; }
#widgets .widget > .widget-heading,
#widgets .widget-device.dw .dw-head {
    height: 46px; min-height: 46px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
}
#widgets .widget > .widget-body,
#widgets .widget-device.dw .dw-body {
    height: auto; min-height: 110px; overflow: visible; flex: 1 1 auto;
}

/* Fuel / sensor-graph cards stack one chart per tank — restore vertical scroll
   inside the fixed-height card so multi-tank vehicles can reach every chart
   (the "no inner scroll" rule above otherwise clips the 2nd+ tank). */
#widgets .widget-sensor-graph > .widget-body,
#widgets .widget-fuel-graph > .widget-body {
    overflow-x: hidden; overflow-y: auto;
}

/* ── Sensors widget (auto width; 1 column, → 2 columns when many sensors) ──
   Uses .widget.widget-sensors (two classes) so the font-size beats the
   inline `#widgets .widget { font-size:14px }` rule in loged.blade.php. */
#widgets .widget.widget-sensors {
    width: auto;
    min-width: 230px;
    max-width: 560px;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e8ebef;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .06);
    vertical-align: bottom;
    white-space: normal;
    font-size: 13px;
    overflow: hidden;
}
#widgets .widget-sensors .widget-heading { padding: 1px 12px; border-bottom: 1px solid #eef0f3; }
#widgets .widget.widget-sensors .widget-title { font-size: 14px; font-weight: 700; color: #111827; }
#widgets .widget-sensors .widget-title .icon { color: #2f9ec7; font-size: 15px; margin-right: 4px; }
#widgets .widget-sensors .widget-body { padding: 2px 12px 6px; font-size: 12px; display: flex; }

/* The widgets bar is a fixed ~188px card: never let rows clip — scroll as a
   last resort, and go two columns beyond 4 rows (JS adds .sw--2; the :has()
   rule is a fallback so cached bundles behave too). */
#widgets .widget-sensors .widget-body { overflow-y: auto; }
#widgets .widget-sensors .sw { display: grid; grid-template-columns: minmax(200px, 1fr); column-gap: 26px; flex: 1; align-content: start; }
#widgets .widget-sensors .sw.sw--2,
#widgets .widget-sensors .sw:has(> .sw-cell:nth-child(5)) { grid-template-columns: repeat(2, minmax(185px, 1fr)); align-content: space-evenly; }
#widgets .widget-sensors .sw-cell {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 4px 0; border-bottom: 1px solid #f1f3f6; min-width: 0;
}
#widgets .widget-sensors .sw-l { display: flex; align-items: center; gap: 8px; min-width: 0; color: #1f2937; font-weight: 600; }
#widgets .widget-sensors .sw-l > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#widgets .widget-sensors .sw-l .icon { color: #6b7280; font-size: 14px; flex: none; width: 16px; text-align: center; }
/* the theme icon font has no glyph for these sensor types — map them to Font Awesome */
#widgets .widget-sensors .sw-l .icon.battery:before,
#widgets .widget-sensors .sw-l .icon.gsm:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal; display: inline-block;
}
#widgets .widget-sensors .sw-l .icon.battery:before { content: "\f241"; } /* fa-battery-three-quarters */
#widgets .widget-sensors .sw-l .icon.gsm:before     { content: "\f012"; } /* fa-signal */
#widgets .widget-sensors .sw-r { flex: none; text-align: right; }
#widgets .widget-sensors .sw-val { font-weight: 400; color: #334155; white-space: nowrap; }
#widgets .widget-sensors .sw-pct { font-size: 11px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
#widgets .widget-sensors .sw-nodata { font-style: italic; color: #9aa3af; font-size: 12px; }

#widgets .widget-sensors .sw-meter { display: inline-flex; align-items: center; gap: 7px; }
#widgets .widget-sensors .sw-fbar {
    width: 34px; height: 4px; border-radius: 3px; background: #eef0f3; overflow: hidden;
    display: inline-block; vertical-align: middle;
}
#widgets .widget-sensors .sw-fbar > span { display: block; height: 100%; border-radius: 3px; }

/* GSM signal bars */
#widgets .widget-sensors .sw-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
#widgets .widget-sensors .sw-sig i { width: 3px; border-radius: 1px; background: #d8dbe0; }
#widgets .widget-sensors .sw-sig i:nth-child(1) { height: 5px; }
#widgets .widget-sensors .sw-sig i:nth-child(2) { height: 8px; }
#widgets .widget-sensors .sw-sig i:nth-child(3) { height: 11px; }
#widgets .widget-sensors .sw-sig i:nth-child(4) { height: 14px; }
#widgets .widget-sensors .sw-sig i.on { background: #1f9d57; }

#widgets .widget-sensors .sw-pill {
    display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
}
#widgets .widget-sensors .sw-pill.sw-on  { background: #e8f6ee; color: #1f9d57; }
#widgets .widget-sensors .sw-pill.sw-off { background: #f1f3f5; color: #6b7280; }

/* ── Reduced font scale (smaller, denser cards) ── */
#widgets .widget .widget-title { font-size: 13px; }
#widgets .widget-device.dw .dw-ic .icon { font-size: 15px; }

/* no divider under the last row of each column */
#widgets .widget-sensors .sw .sw-cell:last-child { border-bottom: 0; }
#widgets .widget-sensors .sw.sw--2 .sw-cell:nth-last-child(2) { border-bottom: 0; }