/* ==========================================================================
   GRUNTER SERVICES — Live Demo Shell
   Shared styling for demo-gruntex.html, demo-vexcare.html, demo-guardian.html
   ========================================================================== */

.demo-banner{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(57,255,122,.16),rgba(18,80,134,.22));
  border-bottom:1px solid var(--border-strong);
  padding:10px 18px;font-size:.82rem;color:var(--ice);text-align:center;
}
.demo-banner b{color:var(--green-neon);}
.demo-banner a.btn{padding:8px 16px;font-size:.68rem;}

.demo-shell{display:flex;min-height:100vh;background:var(--bg);}
.demo-sidebar{
  width:230px;flex:0 0 230px;background:rgba(255,255,255,.025);
  border-right:1px solid var(--border);padding:20px 14px;
  position:sticky;top:41px;align-self:flex-start;height:calc(100vh - 41px);overflow-y:auto;
}
.demo-sidebar .demo-brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px;margin-bottom:10px;border-bottom:1px solid var(--border);}
.demo-sidebar .demo-brand img{height:30px;width:30px;}
.demo-sidebar .demo-brand b{font-family:var(--font-display);font-size:.82rem;color:var(--white);}
.demo-sidebar .demo-brand span{display:block;font-size:.62rem;color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase;}
.demo-nav a{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;margin-bottom:2px;
  color:var(--muted);font-size:.85rem;cursor:pointer;transition:.2s;
}
.demo-nav a .em{font-size:1.05rem;width:20px;text-align:center;}
.demo-nav a:hover{background:rgba(255,255,255,.04);color:var(--white);}
.demo-nav a.active{background:rgba(57,255,122,.12);color:var(--green-neon);}

.demo-main{flex:1;min-width:0;padding:26px 30px 80px;}
.demo-topbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border);
}
.demo-topbar h1{font-size:1.3rem;margin:0;}
.demo-topbar .sub{font-size:.8rem;color:var(--muted-2);}
.demo-topbar-actions{display:flex;align-items:center;gap:12px;}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--green-neon);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;}
.live-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green-neon);box-shadow:0 0 10px var(--green-glow);animation:pulse-ring 2s infinite;}
.bell-btn{
  position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;
}
.bell-btn::after{content:'';position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:#ff5b5b;}

.demo-panel{display:none;}
.demo-panel.active{display:block;animation:fadein .35s var(--ease);}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.demo-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:28px;}
.demo-stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;}
.demo-stat .n{font-family:var(--font-display);font-size:1.7rem;color:var(--green-neon);}
.demo-stat .l{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}

.demo-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);}
table.demo-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px;}
table.demo-table th{text-align:left;padding:13px 16px;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);}
table.demo-table td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--ice);}
table.demo-table tr:last-child td{border-bottom:none;}
table.demo-table tr.clickable{cursor:pointer;transition:background .2s;}
table.demo-table tr.clickable:hover{background:rgba(57,255,122,.05);}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;}
.badge-green{background:rgba(57,255,122,.14);color:var(--green-neon);}
.badge-amber{background:rgba(255,193,7,.14);color:#ffc107;}
.badge-red{background:rgba(255,91,91,.14);color:#ff5b5b;}
.badge-blue{background:rgba(58,160,255,.14);color:#3aa0ff;}
.badge-grey{background:rgba(255,255,255,.07);color:var(--muted);}

.demo-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.demo-toolbar h2{margin:0;font-size:1.05rem;}

.demo-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.demo-tabs button{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;
}
.demo-tabs button.active{background:linear-gradient(135deg,var(--green-500),var(--green-neon));color:var(--navy-950);border-color:transparent;}
.demo-subpanel{display:none;}
.demo-subpanel.active{display:block;}

/* role switch (Vexcare / Guardian) */
.role-switch{display:flex;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:999px;padding:5px;}
.role-switch button{
  font-family:var(--font-display);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 18px;border-radius:999px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:.2s;
}
.role-switch button.active{background:linear-gradient(135deg,var(--green-500),var(--green-neon));color:var(--navy-950);}

/* cards / kanban */
.demo-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.demo-item-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;transition:.25s;}
.demo-item-card:hover{border-color:var(--border-strong);}
.demo-item-card h4{margin:0 0 6px;font-size:1rem;color:var(--white);}
.demo-item-card .meta-line{font-size:.78rem;color:var(--muted);margin-bottom:10px;}
.demo-item-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}

.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:900px){.kanban{grid-template-columns:1fr;}}
.kanban-col{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;padding:14px;min-height:140px;}
.kanban-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-bottom:12px;}

/* disabled-in-demo */
.demo-disabled{
  position:relative;opacity:.55;filter:grayscale(.4);border:1px dashed var(--border);
  border-radius:14px;padding:24px;text-align:center;cursor:not-allowed;
}
.demo-disabled .lock{font-size:1.6rem;margin-bottom:10px;display:block;}
.demo-disabled .tag-disabled{
  display:inline-block;margin-top:10px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:#ff5b5b;border:1px solid rgba(255,91,91,.4);background:rgba(255,91,91,.08);padding:4px 10px;border-radius:999px;
}

/* modal */
.demo-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,5,12,.7);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:200;padding:20px;
}
.demo-modal-backdrop.open{display:flex;}
.demo-modal{
  background:var(--navy-900);border:1px solid var(--border-strong);border-radius:18px;
  max-width:520px;width:100%;max-height:86vh;overflow-y:auto;padding:28px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.demo-modal h3{margin-top:0;}
.demo-modal .close-x{
  position:absolute;top:18px;right:22px;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;
}
.demo-modal-backdrop{position:fixed;}

/* toast */
#demo-toast-host{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;}
.demo-toast{
  background:var(--navy-800);border:1px solid var(--border-strong);color:var(--white);
  padding:12px 20px;border-radius:999px;font-size:.85rem;box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
  animation:toastin .25s var(--ease);
}
@keyframes toastin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* phone frame (Guardian client view) */
.phone-frame{
  width:320px;margin:0 auto;background:#04070d;border-radius:38px;padding:14px;
  border:2px solid rgba(255,255,255,.08);box-shadow:0 30px 70px -20px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.02);
}
.phone-screen{
  background:linear-gradient(160deg,#060912,#0d1428);border-radius:26px;min-height:560px;padding:22px 16px;position:relative;overflow:hidden;
}
.phone-notch{width:80px;height:14px;background:#000;border-radius:0 0 14px 14px;margin:0 auto 14px;}
.panic-diamond{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;margin:18px 0;}
.panic-btn{
  aspect-ratio:1;border-radius:18px;border:none;cursor:pointer;color:#fff;font-family:var(--font-display);
  font-size:.78rem;letter-spacing:.04em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  transition:transform .2s;
}
.panic-btn:active{transform:scale(.94);}
.panic-btn.security{background:linear-gradient(140deg,#3aa0ff,#125086);grid-column:1;grid-row:1;}
.panic-btn.fire{background:linear-gradient(140deg,#ff7a39,#b53d12);grid-column:2;grid-row:1;}
.panic-btn.medical{background:linear-gradient(140deg,#ff5b8a,#a3204f);grid-column:1;grid-row:2;}
.panic-btn.breakdown{background:linear-gradient(140deg,#ffc94d,#a3760a);grid-column:2;grid-row:2;}
.panic-btn .em{font-size:1.6rem;}

.alert-active-banner{
  background:rgba(255,91,91,.14);border:1px solid rgba(255,91,91,.45);border-radius:14px;
  padding:14px;margin-top:14px;text-align:center;
}
.alert-active-banner .pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff5b5b;margin-right:6px;animation:pulse-ring 1s infinite;}

.map-placeholder{
  height:140px;border-radius:14px;background:
    repeating-linear-gradient(45deg, rgba(57,255,122,.05) 0 10px, transparent 10px 20px),
    radial-gradient(circle at 50% 50%, rgba(57,255,122,.18), transparent 60%),
    var(--navy-800);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:.78rem;color:var(--muted);text-align:center;position:relative;
}
.map-placeholder .dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#ff5b5b;box-shadow:0 0 0 6px rgba(255,91,91,.25);animation:pulse-ring 1.6s infinite;}

/* phone app screen layout (mobile-style demos: Vexcare, Guardian) */
.phone-screen.has-tabbar{display:flex;flex-direction:column;padding-bottom:10px;}
.phone-content{flex:1;overflow-y:auto;min-height:0;padding-bottom:6px;}
.phone-header{text-align:center;margin-bottom:10px;}
.phone-header .app-name{font-family:var(--font-display);font-size:.95rem;color:var(--white);}
.phone-header .app-sub{font-size:.72rem;color:var(--muted-2);}
.demo-tabs.phone-tabbar{
  display:flex;gap:0;margin:10px -4px 0;padding-top:8px;border-top:1px solid var(--border);flex-wrap:nowrap;
}
.demo-tabs.phone-tabbar button{
  flex:1;background:none;border:none;color:var(--muted);display:flex;flex-direction:column;
  align-items:center;gap:3px;font-family:var(--font-body);font-size:.62rem;letter-spacing:0;
  text-transform:none;padding:6px 2px;border-radius:10px;
}
.demo-tabs.phone-tabbar button .em{font-size:1.15rem;}
.demo-tabs.phone-tabbar button.active{background:rgba(57,255,122,.1);color:var(--green-neon);}
.phone-fab{
  position:absolute;bottom:78px;right:18px;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--green-500),var(--green-neon));color:var(--navy-950);
  font-size:1.4rem;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  box-shadow:0 10px 24px -6px rgba(57,255,122,.55);z-index:5;
}
.phone-mini-card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;}
.phone-mini-card h4{margin:0 0 4px;font-size:.88rem;color:var(--white);}
.phone-mini-card .meta-line{font-size:.72rem;color:var(--muted);margin-bottom:0;}
.phone-banner{
  background:rgba(57,255,122,.1);border:1px solid var(--border-strong);border-radius:12px;
  padding:10px 12px;font-size:.74rem;margin-bottom:12px;color:var(--ice);
}
.role-phone-row{display:flex;justify-content:center;}

.toggle-switch{position:relative;width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--border);cursor:pointer;flex:0 0 auto;}
.toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.25s;}
.toggle-switch.on{background:rgba(57,255,122,.25);border-color:var(--border-strong);}
.toggle-switch.on::after{transform:translateX(18px);background:var(--green-neon);}

.field-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px;}
.field-inline .field{min-width:140px;flex:1;}

@media(max-width:760px){
  .demo-sidebar{position:fixed;left:-240px;top:0;bottom:0;z-index:120;transition:left .3s;height:100vh;}
  .demo-sidebar.open{left:0;}
  .demo-main{padding:20px 16px 80px;}
  .demo-mobile-toggle{display:inline-flex;}
}
.demo-mobile-toggle{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);align-items:center;justify-content:center;cursor:pointer;color:var(--white);}