/* ================================================================
   eps-demo.css  —  Software Preview Section Styles
   Drop this file in assets/css/ and add:
     <link rel="stylesheet" href="assets/css/eps-demo.css">
   Then remove the entire <style> block (lines 130-241) from index.html.
   ================================================================ */

/* ── Shell ── */
.eps-shell{font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;
  border:1px solid #bfc7d1;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 55px rgba(0,0,0,.12);}

.eps-header{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:#ffffff;flex-wrap:wrap;gap:6px;}
.eps-brand{display:flex;align-items:center;gap:10px;}
.eps-logo{width:28px;height:28px;border-radius:6px;
  background:linear-gradient(#4b86d9,#1f4f9b);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);flex-shrink:0;}
.eps-brand strong{font-size:13px;letter-spacing:.2px;}
.eps-user{font-size:12px;color:#333;}

/* ── Menubar ── */
.eps-menubar{background:linear-gradient(#3f3f3f,#2a2a2a);
  border-top:1px solid #e7e7e7;border-bottom:1px solid #1d1d1d;}
.eps-menu{display:flex;gap:0;padding:0 8px;flex-wrap:wrap;}
.eps-menu button{appearance:none;border:0;background:transparent;color:#f2f2f2;
  padding:9px 10px;font-size:12px;border-right:1px solid rgba(255,255,255,.08);
  cursor:pointer;white-space:nowrap;}
.eps-menu button:hover{background:rgba(255,255,255,.08);}
.eps-menu button.active{background:linear-gradient(#5a5a5a,#3b3b3b);}

/* ── Body layout ── */
.eps-body{display:grid;grid-template-columns:220px 1fr;
  min-height:560px;background:#f6f6f6;}
.eps-side{background:linear-gradient(#f7f7f7,#ececec);
  border-right:1px solid #cfd6df;}
.eps-side h4{margin:14px 12px 8px;font-size:13px;color:#333;
  border-bottom:2px solid #2d2d2d;padding-bottom:8px;}
.eps-nav{display:flex;flex-direction:column;gap:0;padding:0 8px 12px;}
.eps-nav button{appearance:none;border:1px solid transparent;background:transparent;
  text-align:left;padding:9px 10px;font-size:12px;border-radius:6px;
  cursor:pointer;color:#222;}
.eps-nav button:hover{background:#ffffff;}
.eps-nav button.active{background:#ffffff;border-color:#cfd6df;
  box-shadow:inset 0 0 0 1px #fff;}
.eps-main{background:#fff;min-width:0;} /* min-width prevents grid blowout */

/* ── Main head & tabs ── */
.eps-main-head{padding:14px 14px 10px;border-bottom:1px solid #d7dee7;}
.eps-main-head h3{margin:0 0 8px;font-size:16px;}
.eps-tabs{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;}
.eps-tab{appearance:none;border:1px solid #bfc7d1;
  background:linear-gradient(#fbfbfb,#e7e7e7);
  font-size:12px;padding:6px 12px;border-bottom-color:#9aa6b5;
  border-radius:6px 6px 0 0;cursor:pointer;}
.eps-tab.active{background:linear-gradient(#dfe9f7,#c8d7f0);
  border-bottom-color:#c8d7f0;}

/* ── Toolbar ── */
.eps-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:8px 14px;border-bottom:1px solid #d7dee7;background:#f7f9fc;}
.eps-toolbar .eps-pill{display:inline-flex;gap:6px;align-items:center;
  font-size:12px;padding:5px 8px;border:1px solid #cfd6df;
  background:#fff;border-radius:6px;white-space:nowrap;}
.eps-toolbar input{border:1px solid #cfd6df;border-radius:4px;
  padding:6px 8px;font-size:12px;min-width:0;flex:1 1 160px;max-width:260px;}
.eps-toolbar select{border:1px solid #cfd6df;border-radius:4px;
  padding:6px 8px;font-size:12px;}

/* ── Table ── */
.eps-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.eps-gridwrap{display:grid;grid-template-columns:1fr 360px;gap:0;min-height:420px;}
.eps-panel{border-left:1px solid #d7dee7;background:#fbfbfb;}
.eps-table{width:100%;border-collapse:collapse;font-size:12px;}
.eps-table th{background:linear-gradient(#f6f8fb,#e6edf7);
  border-bottom:1px solid #cfd6df;border-right:1px solid #d7dee7;
  padding:7px 8px;color:#223;font-weight:bold;white-space:nowrap;}
.eps-table td{border-bottom:1px solid #e5ebf3;border-right:1px solid #eef2f7;
  padding:6px 8px;vertical-align:middle;}
.eps-table tr:nth-child(even) td{background:#fafcff;}
.eps-table tr:hover td{background:#f1f6ff;}
.eps-table tr.selected td{background:#dbe9ff !important;}
.eps-filterrow td{background:#f3f6fb;}
.eps-filterrow input{width:100%;box-sizing:border-box;border:1px solid #cfd6df;
  padding:4px 6px;font-size:12px;border-radius:3px;}

/* ── Status indicators ── */
.st{display:inline-block;width:10px;height:10px;border:1px solid #6b7280;
  border-radius:2px;margin-right:6px;vertical-align:-1px;}
.st.ok{background:#21b14b;border-color:#168a36;}
.st.bad{background:#e11d48;border-color:#b61539;}
.st.warn{background:#f59e0b;border-color:#c77c06;}

.ico{display:inline-flex;width:18px;height:18px;align-items:center;
  justify-content:center;border:1px solid #cfd6df;
  background:linear-gradient(#fff,#ececec);border-radius:3px;
  font-size:11px;color:#444;}
.eps-actions{display:flex;gap:6px;align-items:center;}
.eps-actions .ico{cursor:pointer;}
.eps-actions .ico:hover{filter:brightness(.97);}

/* ── Detail panel ── */
.eps-detail{padding:12px 12px 14px;}
.eps-detail h4{margin:2px 0 10px;font-size:13px;color:#222;
  border-bottom:1px solid #d7dee7;padding-bottom:8px;}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;font-size:12px;}
.kv div{background:#fff;border:1px solid #d7dee7;border-radius:6px;padding:8px;}
.kv b{display:block;font-size:11px;color:#5b6472;margin-bottom:4px;font-weight:600;}
.eps-mini{margin-top:10px;background:#fff;border:1px solid #d7dee7;
  border-radius:6px;overflow:hidden;}
.eps-mini .t{padding:7px 8px;font-size:12px;
  background:linear-gradient(#f6f8fb,#e6edf7);border-bottom:1px solid #cfd6df;}
.eps-mini .c{padding:10px;}

/* ── Footer / pager ── */
.eps-footer{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:6px;padding:8px 14px;
  border-top:1px solid #d7dee7;background:#f7f9fc;font-size:12px;color:#334;}
.eps-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.eps-pager button{appearance:none;border:1px solid #cfd6df;
  background:linear-gradient(#fff,#ececec);padding:4px 8px;
  border-radius:4px;cursor:pointer;}

/* ── View switching ── */
.eps-view{display:none;}
.eps-view.active{display:block;}

/* ── MAP ── */
.eps-mapwrap{display:flex;flex-direction:column;}
.eps-map{
  position:relative;
  height:380px;
  border-bottom:1px solid #d7dee7;
  overflow:hidden;
  /* fallback bg if SVG fails to load */
  background:linear-gradient(160deg,#d9eaf7 0%,#c5dff2 35%,#b8d8ed 65%,#cce8d8 100%);
}
.eps-map .badge{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:2;}
.eps-map .badge span{background:rgba(255,255,255,.92);border:1px solid #cfd6df;
  padding:5px 8px;border-radius:6px;font-size:12px;backdrop-filter:blur(4px);}
.eps-map svg{position:absolute;inset:0;width:100%;height:100%;}

/* Map SVG classes */
.map-land{fill:#e8f0e0;stroke:#b5c9a2;stroke-width:.6;}
.map-water{fill:#c5dff2;}
.map-route{fill:none;stroke:#1faa2b;stroke-width:3.5;
  stroke-linecap:round;stroke-linejoin:round;}
.map-route.secondary{stroke:#0a7f9e;stroke-width:2.5;opacity:.8;}
.map-pin-halo{fill:rgba(209,26,42,.18);}
.map-pin{fill:#d11a2a;stroke:#8e0f1b;stroke-width:1.2;}
.map-pin-dot{fill:#fff;}
.map-label{font-family:Arial,sans-serif;font-size:10px;fill:#334;font-weight:600;}
.map-city{fill:#446;font-family:Arial,sans-serif;font-size:9px;}

/* ── Forms ── */
.eps-form{padding:12px 14px;}
.eps-form .row{display:grid;
  grid-template-columns:220px 1fr 220px 1fr;
  gap:8px 12px;align-items:center;font-size:12px;}
.eps-form .row b{color:#333;}
.eps-form input,.eps-form select{border:1px solid #cfd6df;border-radius:3px;
  padding:6px 7px;font-size:12px;background:#fff;width:100%;box-sizing:border-box;}
.eps-form .sep{margin:14px 0;border-top:1px solid #d7dee7;}

.eps-btnbar{display:flex;gap:8px;flex-wrap:wrap;
  padding:10px 14px 12px;border-top:1px solid #d7dee7;background:#f7f9fc;}
.eps-btn{appearance:none;border:1px solid #cfd6df;
  background:linear-gradient(#fff,#ececec);
  padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;}
.eps-btn.primary{background:linear-gradient(#e6f0ff,#cfe0ff);border-color:#a9c4f5;}
.eps-btn:disabled{opacity:.55;cursor:not-allowed;}

.eps-alarmtabs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 0;}
.eps-alarmtabs button{appearance:none;border:1px solid #cfd6df;
  background:linear-gradient(#fbfbfb,#e7e7e7);
  padding:6px 10px;border-radius:6px 6px 0 0;cursor:pointer;font-size:12px;}
.eps-alarmtabs button.active{background:linear-gradient(#dfe9f7,#c8d7f0);}

.eps-lock{display:grid;grid-template-columns:1fr 320px;gap:14px;padding:12px 14px;}
.eps-trailer{background:#fff;border:1px solid #d7dee7;border-radius:8px;
  padding:10px;min-height:160px;position:relative;}
.eps-trailer svg{width:100%;height:160px;}
.eps-sens{background:#fff;border:1px solid #d7dee7;border-radius:8px;padding:10px;}
.eps-sens h5{margin:0 0 8px;font-size:12px;}
.gridDots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.dot{height:18px;border-radius:3px;border:1px solid #cfd6df;background:#f7f7f7;
  display:flex;align-items:center;justify-content:center;font-size:11px;}
.dot.on{background:#dbe9ff;border-color:#a9c4f5;}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════ */

/* ── ≤980px ── */
@media(max-width:980px){
  .eps-body{grid-template-columns:1fr;}
  .eps-side{border-right:0;border-bottom:1px solid #cfd6df;}
  .eps-nav{flex-direction:row;flex-wrap:wrap;gap:4px;padding:8px;}
  .eps-nav button{padding:6px 10px;}
  .eps-gridwrap{grid-template-columns:1fr;}
  .eps-panel{border-left:0;border-top:1px solid #d7dee7;}
  .eps-lock{grid-template-columns:1fr;}
  .eps-map{height:320px;}
}

/* ── ≤640px ── */
@media(max-width:640px){
  .eps-form .row{grid-template-columns:1fr;}
  .eps-form .row > b{margin-top:8px;}
  .eps-form .row > b:first-child{margin-top:0;}
  .eps-map{height:240px;}
  .kv{grid-template-columns:1fr;}
  .eps-toolbar{flex-direction:column;align-items:stretch;}
  .eps-toolbar input{max-width:100%;}
  .eps-user{display:none;}
  .eps-lock{padding:8px;}
  .eps-trailer svg{height:120px;}
}

/* ── ≤480px ── */
@media(max-width:480px){
  .eps-header{padding:8px 10px;}
  .eps-brand strong{font-size:12px;}
  .eps-menu button{padding:7px 8px;font-size:11px;}
  .eps-main-head{padding:10px 10px 8px;}
  .eps-main-head h3{font-size:14px;}
  .eps-tabs{gap:4px;}
  .eps-tab{padding:5px 8px;font-size:11px;}
  .eps-form{padding:8px 10px;}
  .eps-btnbar{padding:8px 10px 10px;}
  .eps-detail{padding:8px 8px 10px;}
  .eps-map{height:200px;}
  .eps-footer{flex-direction:column;align-items:flex-start;gap:4px;}
}