/* ---- administration des applications ---- */
.appcard { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; margin:0 0 14px; display:grid; gap:10px; }
.appcard .row2 { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.appcard label { font-size:.75rem; color:var(--muted); display:grid; gap:2px; }
.appcard input[type=text], .appcard select { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 8px; }
.appcard .applink { font-size:.85rem; color:var(--blue); word-break:break-all; }
.approw { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.approw .ic { width:26px; height:26px; fill:none; stroke:var(--text); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.approw .nm { flex:1; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.approw select { max-width:130px; }
/* ---- connexion et utilisateurs ---- */
.loginview { position:fixed; inset:0; z-index:100; background:var(--bg); display:grid; place-items:center; padding:20px; }
.loginview[hidden] { display:none; }
.loginview form { width:min(360px,100%); background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px; display:grid; gap:12px; }
.loginview h2 { margin:0; font-size:1.3rem; text-transform:none; letter-spacing:-.01em; color:var(--text); }
.loginview label { font-size:.78rem; color:var(--muted); display:grid; gap:3px; }
.loginview input, .loginview select { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 10px; font-size:16px; }
.klogout { flex:none; border:1px solid var(--line); background:none; color:var(--muted); border-radius:50%; width:32px; height:32px; cursor:pointer; padding:0; font-size:1rem; }
.usercard { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; margin:0 0 10px; display:grid; gap:8px; }
.usercard .row2 { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.usercard label { font-size:.75rem; color:var(--muted); display:grid; gap:2px; }
.usercard input[type=text], .usercard input[type=password], .usercard select { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 8px; }
.usercard .checks { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.85rem; }
.usercard .checks label { display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--text); }
.sessrow { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:.85rem; }
.sessrow span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ---- en-tête d'administration : logo, nom, menu, compte ---- */
body:not(.kiosk) main, body:not(.kiosk) main:has(#v-pages:not([hidden])) { max-width:none; }
.topbar { position:sticky; top:0; z-index:30; margin:-20px -20px 20px; padding:0 20px; background:color-mix(in srgb,var(--panel) 94%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.hdr { display:flex; align-items:center; gap:22px; min-height:56px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; flex:none; }
.brand .logo { width:30px; height:30px; flex:none; }
.brandname { font-size:1.15rem; font-weight:700; letter-spacing:-.02em; }
.topbar .bar { margin:0; gap:2px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.mainnav { flex:1; min-width:0; align-self:stretch; align-items:stretch; }
.mainnav .pill { display:flex; align-items:center; border-radius:0; border:0; border-bottom:3px solid transparent; background:none; padding:0 14px; font-weight:600; color:var(--muted); white-space:nowrap; }
.mainnav .pill.act { color:var(--on); border-bottom-color:var(--on); }
.mainnav .pill:hover { color:var(--text); background:color-mix(in srgb,var(--text) 5%,transparent); }
.hdruser { display:flex; align-items:center; gap:10px; flex:none; }
.hdrname { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.85rem; }
.hdrname svg, .hdrout svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.hdrout { display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:none; color:var(--muted); border-radius:999px; padding:6px 12px; cursor:pointer; font-size:.85rem; }
.hdrout:hover { color:var(--bad); border-color:var(--bad); }
.subnav { padding:8px 0; border-top:1px solid var(--line); }
.subnav .pill { padding:5px 12px; font-size:.85rem; white-space:nowrap; }
.navbadge { display:inline-block; min-width:18px; margin-left:6px; padding:0 6px; border-radius:999px; background:var(--on); color:#fff; font-size:.7rem; line-height:18px; text-align:center; }
.navbadge.bad { background:var(--bad); }
@media (max-width:760px) { .hdr { gap:10px; } .brandname, .hdrname, .hdrout span { display:none; } .hdrout { padding:7px; } .mainnav .pill { padding:0 10px; font-size:.9rem; } }
@media (max-width:640px) { .topbar { margin:-20px -14px 14px; padding:0 14px; } }
/* ---- tableau de bord ---- */
.dashsum { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:6px; }
.dcard { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.dcard.ok { border-color:color-mix(in srgb,var(--ok) 50%,var(--line)); } .dcard.warn { border-color:color-mix(in srgb,var(--on) 60%,var(--line)); } .dcard.bad { border-color:color-mix(in srgb,var(--bad) 60%,var(--line)); }
.dcard .dnum { font-size:2rem; font-weight:700; line-height:1.1; } .dcard .dnum small { font-size:1rem; color:var(--muted); font-weight:600; }
.dcard.ok .dnum { color:var(--ok); } .dcard.warn .dnum { color:var(--on); } .dcard.bad .dnum { color:var(--bad); }
.dcard .dlab { color:var(--muted); font-size:.85rem; }
.dlist { display:grid; gap:8px; }
.ditem { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--on); border-radius:12px; padding:10px 12px; cursor:pointer; }
.ditem.bad { border-left-color:var(--bad); }
.ditem .dtxt { flex:1; min-width:0; display:grid; } .ditem .dtxt small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.ditem .dkind { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); flex:none; }
.ditem .dage { font-size:.75rem; color:var(--muted); flex:none; min-width:70px; text-align:right; }
.dempty { background:var(--panel); border:1px solid color-mix(in srgb,var(--ok) 50%,var(--line)); border-radius:16px; padding:18px; color:var(--muted); }
@media (max-width:560px) { .ditem .dage { display:none; } }
@media (max-width:900px) { .hdrname { display:none; } .hdr { gap:14px; } }
/* bloc unique : tous les appareils en ligne, puis une ligne par type */
.dashsum { display:block; }
.dall { padding:16px 18px; }
.dall .dhead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dstate { font-weight:600; font-size:.9rem; padding:4px 12px; border-radius:999px; border:1px solid var(--line); }
.dstate.ok { color:var(--ok); border-color:var(--ok); } .dstate.warn { color:var(--on); border-color:var(--on); } .dstate.bad { color:var(--bad); border-color:var(--bad); }
.dbrands { display:grid; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.dbrand { display:grid; grid-template-columns:110px 1fr 70px; align-items:center; gap:12px; }
.dbrand .badge { justify-self:start; }
.dbrand b { text-align:right; font-weight:700; } .dbrand b small { color:var(--muted); font-weight:600; }
.dbar { height:8px; border-radius:999px; background:color-mix(in srgb,var(--text) 8%,transparent); overflow:hidden; }
.dbar i { display:block; height:100%; border-radius:999px; background:var(--ok); } .dbar i.warn { background:var(--on); }
/* anomalies : ligne cliquable + actions, acquittement */
.ditem { padding:0; cursor:default; }
.ditem .dmain { flex:1; min-width:0; display:flex; align-items:center; gap:12px; background:none; border:0; text-align:left; padding:10px 12px; cursor:pointer; color:inherit; font:inherit; }
.ditem .dmain:hover .dtxt b { text-decoration:underline; }
.ditem .dacts { display:flex; gap:6px; padding-right:10px; flex:none; }
.ditem.acked { opacity:.6; border-left-color:var(--line); }
.pill.sm { padding:3px 10px; font-size:.78rem; }
.dlisthead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dlisthead h2 { margin-bottom:8px; }
.card.hi, .iotcard.hi, [data-iot].hi { outline:2px solid var(--on); box-shadow:0 0 0 6px color-mix(in srgb,var(--on) 25%,transparent); transition:box-shadow .4s; }
@media (max-width:640px) { .ditem { flex-wrap:wrap; } .ditem .dacts { padding:0 10px 8px; } }
/* journal */
.jhead { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 10px; }
.jhead select { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:5px 8px; }
.actbox { gap:8px; overflow-x:auto; }
.acttab { width:100%; border-collapse:collapse; font-size:.85rem; }
.acttab th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:4px 8px; border-bottom:1px solid var(--line); }
.acttab td { padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:top; word-break:break-word; }
.acttab td.nw { white-space:nowrap; }
.acttab tr.bad td { color:var(--bad); }
.badge.virtual { color:var(--blue); border-color:var(--blue); border-style:dashed; }
.virout { display:grid; gap:6px; border-top:1px solid var(--line); padding-top:8px; }
.virout textarea { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px; color:var(--text); }
.badge.zwave { color:var(--on); border-color:var(--on); }
.badge.camera { color:var(--blue); border-color:var(--blue); }