/* v0.9.18: customize grid only; brand, navigation, read-only notice and connection controls remain fixed. */
.ecl-layout-controls{margin:16px 0 13px;position:relative;z-index:2}
.ecl-layout-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ecl-layout-toolbar .button{font-size:12px;padding:8px 11px}
.ecl-layout-toolbar .ecl-inline-select{max-width:200px;width:auto;font-size:12px;padding:7px 10px}
.ecl-layout-toolbar .ecl-layout-state{font-size:12px;color:var(--muted);margin-left:auto}
.ecl-layout-editor{margin-top:11px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:15px}
.ecl-layout-editor[hidden]{display:none!important}
.ecl-layout-editor p{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 12px}
.ecl-layout-visibility{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px}
.ecl-layout-visibility label{display:flex;align-items:center;gap:7px;color:var(--text);font-size:12px}
.ecl-layout-visibility input{accent-color:var(--accent)}
.ecl-tile-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;margin-top:12px!important;min-width:0}
.ecl-tile-grid > [data-tile-id]{grid-column:span var(--ecl-span,2);min-width:0;align-self:stretch}
.ecl-tile-grid > [data-tile-id][hidden]{display:none!important}
.ecl-tile-grid .dg-gauge{min-height:180px}
.ecl-tile-grid .card{height:100%}
.ecl-tile-grid.ecl-editing > [data-tile-id]{outline:1px dashed color-mix(in srgb,var(--accent) 60%,var(--border));outline-offset:2px}
.ecl-tile-grid .ecl-tile-actionrow{display:none;gap:6px;align-items:center;flex-wrap:wrap;margin:-10px -10px 12px;padding:7px;border:1px solid var(--border);border-radius:10px;background:var(--elevated)}
.ecl-tile-grid.ecl-editing .ecl-tile-actionrow{display:flex}
.ecl-tile-actionrow .ecl-handle{cursor:grab;touch-action:none;user-select:none;flex:1;min-width:55px;font-weight:850;text-align:left;color:var(--text);border:0;background:transparent;padding:6px 5px}
.ecl-tile-actionrow .ecl-handle:active{cursor:grabbing}
.ecl-tile-actionrow .ecl-icon-control{padding:6px 8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-weight:800;line-height:1.2}
.ecl-tile-actionrow select{padding:5px 6px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:12px}
.ecl-tile-grid .ecl-drag-over{outline:3px solid var(--accent)!important}
.ecl-layout-toolbar .button:focus-visible,.ecl-layout-editor input:focus-visible,.ecl-tile-actionrow button:focus-visible,.ecl-tile-actionrow select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* A small tile cannot fit large content. All tile content remains scrollable and no forms are clipped. */
.ecl-tile-grid .ecl-tile--small .stat{font-size:clamp(22px,2.9vw,33px)}
#garage-tiles .card{height:auto}
#dashboard-tiles .card h2{overflow-wrap:anywhere}
@media(max-width:900px){.ecl-tile-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.ecl-tile-grid > [data-tile-id]{grid-column:span min(var(--ecl-span,2),4)}}
@media(max-width:730px){
 .ecl-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .ecl-tile-grid > [data-tile-id]{grid-column:span var(--ecl-mobile-span,2)!important}
 .ecl-tile-grid .card{padding:13px;overflow-wrap:anywhere}
 .ecl-tile-grid .dg-gauge{min-height:150px}
 .ecl-layout-toolbar .ecl-layout-state{width:100%;margin-left:0}
 .ecl-layout-editor{padding:12px}
 .ecl-tile-grid .ecl-tile-actionrow{margin:-4px -4px 10px}
 .ecl-tile-actionrow .ecl-handle{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.ecl-tile-grid *{transition:none!important}}
/* Large mobile tiles have additional breathing room but never clip controls. */
@media(max-width:730px){.ecl-tile-grid .ecl-tile--large{min-height:190px}}


/* v0.9.33: the Appearance > Preferred gauge layout MUST visibly override the
 * generic movable-tile grid. Preserve small/medium/large custom tile sizes.
 * Desktop: Grid=3 across, Compact=4 across, Stacked=1 across.
 * Tablet: 2 / 3 / 1. Mobile: 2 / 2 / 1 (compact is shorter).
 */
#dg-grid.ecl-tile-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important}
#dg-grid.ecl-tile-grid[data-layout="grid"] > [data-tile-id].ecl-tile--small{grid-column:span 4!important}
#dg-grid.ecl-tile-grid[data-layout="grid"] > [data-tile-id].ecl-tile--medium{grid-column:span 6!important}
#dg-grid.ecl-tile-grid[data-layout="grid"] > [data-tile-id].ecl-tile--large{grid-column:span 12!important}
#dg-grid.ecl-tile-grid[data-layout="compact"]{gap:9px!important}
#dg-grid.ecl-tile-grid[data-layout="compact"] > [data-tile-id].ecl-tile--small{grid-column:span 3!important}
#dg-grid.ecl-tile-grid[data-layout="compact"] > [data-tile-id].ecl-tile--medium{grid-column:span 6!important}
#dg-grid.ecl-tile-grid[data-layout="compact"] > [data-tile-id].ecl-tile--large{grid-column:span 12!important}
#dg-grid.ecl-tile-grid[data-layout="stacked"] > [data-tile-id]{grid-column:1 / -1!important}
#dg-grid.ecl-tile-grid[data-layout="stacked"] .dg-gauge{min-height:130px}
#dg-grid.ecl-tile-grid[data-layout="compact"] .dg-gauge{min-height:137px;padding:13px}
#dg-grid.ecl-tile-grid[data-layout="compact"] .dg-gauge-value{font-size:clamp(23px,2.5vw,31px);margin:11px 0}
@media(max-width:1000px){
 #dg-grid.ecl-tile-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
 #dg-grid.ecl-tile-grid[data-layout="grid"] > [data-tile-id].ecl-tile--small{grid-column:span 3!important}
 #dg-grid.ecl-tile-grid[data-layout="grid"] > [data-tile-id].ecl-tile--medium,
 #dg-grid.ecl-tile-grid[data-layout="grid"] > [data-tile-id].ecl-tile--large{grid-column:span 6!important}
 #dg-grid.ecl-tile-grid[data-layout="compact"] > [data-tile-id].ecl-tile--small{grid-column:span 2!important}
 #dg-grid.ecl-tile-grid[data-layout="compact"] > [data-tile-id].ecl-tile--medium{grid-column:span 3!important}
 #dg-grid.ecl-tile-grid[data-layout="compact"] > [data-tile-id].ecl-tile--large{grid-column:span 6!important}
}
@media(max-width:730px){
 #dg-grid.ecl-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 #dg-grid.ecl-tile-grid[data-layout="grid"] > [data-tile-id].ecl-tile--small,
 #dg-grid.ecl-tile-grid[data-layout="compact"] > [data-tile-id].ecl-tile--small{grid-column:span 1!important}
 #dg-grid.ecl-tile-grid[data-layout="grid"] > [data-tile-id].ecl-tile--medium,
 #dg-grid.ecl-tile-grid[data-layout="grid"] > [data-tile-id].ecl-tile--large,
 #dg-grid.ecl-tile-grid[data-layout="compact"] > [data-tile-id].ecl-tile--medium,
 #dg-grid.ecl-tile-grid[data-layout="compact"] > [data-tile-id].ecl-tile--large{grid-column:span 2!important}
 #dg-grid.ecl-tile-grid[data-layout="stacked"] > [data-tile-id]{grid-column:1 / -1!important}
 #dg-grid.ecl-tile-grid[data-layout="compact"]{gap:7px!important}
 #dg-grid.ecl-tile-grid[data-layout="compact"] .dg-gauge{min-height:124px;padding:9px}
 #dg-grid.ecl-tile-grid[data-layout="compact"] .dg-gauge-value{font-size:clamp(22px,6vw,28px);margin:10px 0}
}


/* Instant visible preview on Appearance screen; independent of vehicle connection. */
.gauge-layout-preview-shell{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--elevated);max-width:100%}
.gauge-layout-preview{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;min-width:0}
.gauge-layout-preview > span{grid-column:span 4;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:6px 3px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border));background:var(--surface);border-radius:8px;color:var(--text);font-size:11px;font-weight:750}
.gauge-layout-preview[data-layout="stacked"] > span{grid-column:1 / -1;min-height:29px}
.gauge-layout-preview[data-layout="compact"] > span{grid-column:span 3;min-height:38px;font-size:10px}
@media(max-width:480px){
 .gauge-layout-preview{grid-template-columns:repeat(4,minmax(0,1fr))}
 .gauge-layout-preview[data-layout="grid"] > span{grid-column:span 2}
 .gauge-layout-preview[data-layout="compact"] > span{grid-column:span 2}
 .gauge-layout-preview[data-layout="stacked"] > span{grid-column:1 / -1}
}