/* ==========================================================
   PMMS shared components — extends css/style.css
   Gauge widget, hub shell (header/sidebar/bottom-nav), material
   class list, and small helpers reused across dashboard modules.
   ========================================================== */

/* ---------- Gauge (MTBF / MTTR style) ---------- */
.gauge-card{
    background:var(--panel); border:1px solid var(--border); border-top:2px solid var(--hazard-dim);
    border-radius:10px; padding:1rem 1rem .5rem; text-align:center;
}
.gauge-card .gauge-title{color:var(--text-dim); font-size:.78rem; letter-spacing:.5px; font-weight:600; margin-bottom:.35rem;}
.gauge-wrap{position:relative; width:100%; max-width:220px; margin:0 auto;}
.gauge-value{
    font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.6rem; color:#04A75C;
    margin-top:-1.6rem; position:relative; z-index:2;
}
html.theme-light .gauge-value{color:#04A75C;}
.gauge-sub{color:var(--text-dim); font-size:.68rem; margin-top:.1rem;}

/* ---------- Material class list ---------- */
.mclass-table{width:100%; border-collapse:collapse; font-size:.82rem;}
.mclass-table td{padding:.4rem .6rem; border-bottom:1px solid var(--border);}
.mclass-table td:last-child{text-align:left; font-family:'JetBrains Mono',monospace; font-weight:600;}
.mclass-table tr.mc-alt td{background:rgba(239,67,77,.10);}
html.theme-light .mclass-table tr.mc-alt td{background:rgba(239,67,77,.06);}
.mclass-table tr.mc-total td{border-top:2px solid var(--hazard); font-weight:700; color:var(--hazard);}
.mclass-scroll{max-height:340px; overflow-y:auto;}

/* ---------- Chip filter row (Forklift filters live in a panel, reuses .filter-select) ---------- */
.filters-panel{display:grid; gap:1rem; grid-template-columns:repeat(1,minmax(0,1fr));}
@media (min-width:768px){ .filters-panel{grid-template-columns:repeat(4,minmax(0,1fr));} }

/* ---------- Hub shell (index.html) ---------- */
.hub-header{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1rem 1.5rem; border-bottom:1px solid var(--border); background:var(--panel);
}
.hub-header .brand{display:flex; align-items:center; gap:.75rem;}
.hub-header .brand img{height:2.6rem; width:2.6rem; border-radius:.5rem; border:2px solid var(--blue); background:rgba(255,255,255,.05); object-fit:contain; padding:.2rem;}
.hub-header h1{font-family:'Rajdhani','Vazirmatn',sans-serif; font-weight:700; font-size:1.3rem; color:var(--blue); margin:0;}
.hub-header p{color:var(--text-dim); font-size:.72rem; font-family:'JetBrains Mono',monospace; margin:.15rem 0 0;}

.hub-shell{display:flex; min-height:100vh; background:var(--bg); color:var(--text);}
.hub-sidebar{
    width:230px; flex-shrink:0; background:var(--panel); border-inline-end:1px solid var(--border);
    padding:1.25rem .9rem; display:flex; flex-direction:column; gap:.35rem;
    /* Stays pinned to the viewport while the dashboard content scrolls,
       so switching between Crane/Forklift never requires scrolling back up. */
    position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
}
.hub-sidebar .ic-forklift, .hub-bottom-nav .ic-forklift, .module-card .ic-forklift{ color:currentColor; }
.hub-sidebar a{
    display:flex; align-items:center; gap:.6rem; padding:.65rem .8rem; border-radius:8px;
    color:var(--text-dim); text-decoration:none; font-size:.88rem; font-weight:600;
    border:1px solid transparent; transition:.15s ease;
}
.hub-sidebar a:hover{color:var(--text); background:var(--panel-2); border-color:var(--border);}
.hub-sidebar a.active{color:var(--hazard); background:var(--panel-2); border-color:var(--hazard-dim);}
.hub-sidebar .grp-label{color:var(--text-dim); font-size:.68rem; letter-spacing:.6px; margin:.9rem .4rem .2rem; text-transform:uppercase;}
.hub-main{flex:1; min-width:0; padding:1.5rem;}

.hub-bottom-nav{
    display:none; position:fixed; bottom:0; inset-inline:0; z-index:40; background:var(--panel);
    border-top:1px solid var(--border); padding:.4rem .3rem; justify-content:space-around;
}
.hub-bottom-nav a{color:var(--text-dim); font-size:.65rem; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.3rem;}
.hub-bottom-nav a.active{color:var(--hazard);}
.hub-bottom-nav a .ic{font-size:1.15rem;}

@media (max-width:900px){
    .hub-sidebar{display:none;}
    .hub-bottom-nav{display:flex;}
    .hub-main{padding:1rem; padding-bottom:5.2rem;}
    /* Push each dashboard's own floating action buttons above the
       persistent bottom nav bar so the two don't overlap on mobile. */
    #headerActions{ bottom:4.6rem !important; }
}

/* ---------- Fixed-height chart canvases ----------
   Chart.js with maintainAspectRatio:false needs an ancestor with an
   explicit CSS height, otherwise the canvas grows without bound on
   every redraw/resize. Every bar/line chart canvas should be wrapped
   in one of these. */
.chart-canvas-wrap{ position:relative; width:100%; height:280px; }
.chart-canvas-wrap.chart-canvas-tall{ height:340px; }
.chart-canvas-wrap canvas{ width:100% !important; height:100% !important; }

/* ---------- Module picker cards on the hub home ---------- */
.module-grid{display:grid; gap:1.25rem; grid-template-columns:repeat(1,minmax(0,1fr));}
@media (min-width:640px){ .module-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1024px){ .module-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }

.module-card{
    display:block; text-decoration:none; position:relative; overflow:hidden;
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--border); border-top:3px solid var(--hazard); border-radius:12px;
    padding:1.5rem; transition:.18s ease;
}
.module-card:hover{transform:translateY(-3px); border-top-color:var(--blue); box-shadow:0 10px 30px rgba(0,0,0,.35);}
.module-card .emoji{font-size:2.2rem; margin-bottom:.6rem; display:block;}
.module-card h3{font-family:'Rajdhani','Vazirmatn',sans-serif; font-weight:700; font-size:1.15rem; color:var(--text); margin:0 0 .35rem;}
.module-card p{color:var(--text-dim); font-size:.82rem; line-height:1.7; margin:0;}
.module-card .tag{
    position:absolute; top:1rem; left:1rem; font-size:.65rem; font-family:'JetBrains Mono',monospace;
    padding:.15rem .5rem; border-radius:20px; border:1px solid var(--border); color:var(--text-dim);
}
.module-card.disabled{opacity:.55; pointer-events:none;}
.module-card .tag.soon{border-color:var(--hazard-dim); color:var(--hazard);}
.module-card .tag.live{border-color:#04A75C; color:#04A75C;}

/* ---------- Coming soon placeholder pages ---------- */
.coming-soon{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:60vh; text-align:center; gap:.75rem; color:var(--text-dim);
}
.coming-soon .emoji{font-size:2.6rem;}
.coming-soon h2{color:var(--text); font-family:'Rajdhani','Vazirmatn',sans-serif; font-size:1.4rem;}
.coming-soon a.btn{margin-top:.5rem;}