/* Kelmo Manager: redesign. Side menu + phone bars copied from the live "White" side menu (unchanged). */
body{margin:0;background:#FFFFFF}
a{color:#82326C;text-decoration:none}a:hover{color:#672654}
.k,.k *{box-sizing:border-box}
.k{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:#1F1B16;background:#FFFFFF;font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.k h1,.k h2,.k h3,.k p{margin:0}
.k button{font-family:inherit}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.main{min-width:0;padding:32px 40px 80px}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:24px}

/* ---------- Side menu (unchanged from live) ---------- */
.dside{width:260px;background:#FFFFFF;color:#1F1B16;border-right:1px solid #E4E7EC;padding:18px 14px 14px;gap:12px;display:flex;flex-direction:column}
.dside__kelmo{display:flex;align-items:center;gap:10px;padding:6px 10px 14px 11px;font-size:22px;line-height:1;color:#1F1B16 !important;white-space:nowrap}
.dside__kelmo .klogo{display:block;height:24px;width:auto;flex:none;overflow:visible}
.dside__kelmo small{display:inline-flex;align-items:center;height:20px;margin:0;padding:0 7px;border-radius:6px;background:#F7F5F2;border:1px solid #E4E7EC;font-size:10.5px;line-height:1;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4B4741;transform:translateY(2px)}
.dside__brand,.dside__me{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:#1F1B16;text-align:left;padding:6px 10px;border-radius:12px;cursor:pointer;transition:background-color .12s ease}
.dside__brand:hover{background:#F7F5F2}
.dside__names{display:flex;flex-direction:column;min-width:0;flex:1}
.dside__names b{font-size:17px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dside__names small{font-size:13px;color:#6B655E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dside__chev{width:16px;height:16px;color:#6B655E;flex:none}
.dside__tools{display:flex;align-items:center;gap:8px}
.dside__find{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border:1px solid #E4E7EC;border-radius:12px;background:#FFFFFF;color:#6B655E;font:500 14px Inter,system-ui,sans-serif;cursor:pointer;text-align:left}
.dside__find:hover{border-color:#D3D6DC;color:#1F1B16}
.dside__find svg{width:16px;height:16px;flex:none}
.dside__find span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dside__find kbd{font-family:inherit;font-size:11px;font-weight:700;color:#6B655E;border:1px solid #E4E7EC;border-radius:6px;padding:1px 6px;background:transparent}
.dside__tool{position:relative;width:40px;height:40px;flex:none;border-radius:12px;border:1px solid #E4E7EC;background:#FFFFFF;color:#4B4741;display:grid;place-items:center;cursor:pointer}
.dside__tool svg{width:18px;height:18px}
.dtop__dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#82326C;color:#FFFFFF;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dnav{flex:1;display:flex;flex-direction:column;gap:1px;padding:4px 0 8px}
.dnav a{display:flex;align-items:center;gap:11px;min-height:38px;padding:0 10px;border-radius:7px;color:#4B4741;border:1px solid transparent;font-size:14px;font-weight:500;letter-spacing:.005em;transition:background-color .15s,color .15s}
.dnav a svg{width:18px;height:18px;flex:none;color:#6B655E}
.dnav a:hover{color:#1F1B16;background:#F7F5F2}
.dnav a[aria-current="page"]{color:#672654;background:#FAE4F2;border-color:#FAE4F2;font-weight:600}
.dnav a[aria-current="page"] svg{color:#82326C}
.dnav__badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#82326C;color:#FFFFFF;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dnav__help{margin-top:18px}
.dside__foot{flex:none}
.dside__me{border-top:1px solid #E4E7EC;border-radius:0;padding:14px 10px 4px}
.dside__me .dside__names b{font-size:14px;font-weight:700}

/* ---------- Phone bars (unchanged from live) ---------- */
.dtop{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 12px 10px 16px;background:#FFFFFF;color:#1F1B16;border-bottom:1px solid #E4E7EC}
.dtop__menu{width:44px;height:44px;margin-left:-10px;border:0;background:none;color:#1F1B16;display:grid;place-items:center;cursor:pointer}
.dtop__menu svg{width:22px;height:22px}
.dtop__brand{display:flex;align-items:center;min-width:0;flex:1}
.dtop__brand .dside__names b{font-size:16px}
.dtop__icon{position:relative;width:44px;height:44px;border-radius:22px;border:0;background:#F7F5F2;color:#4B4741;display:grid;place-items:center;cursor:pointer}
.dtop__icon svg{width:20px;height:20px}
.dtop__icon .dtop__dot{top:7px;right:7px}
.dtabs{display:grid;grid-template-columns:repeat(4,1fr);background:#FFFFFF;border-top:1px solid #E4E7EC;padding:4px 0 6px}
.dtabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;font-size:12px;font-weight:600;color:#6B655E}
.dtabs svg{width:22px;height:22px}
.dtabs [aria-current="page"]{color:#82326C;font-weight:700}
.dtabs__badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#82326C;color:#FFFFFF;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ---------- Type ---------- */
.h1{font-size:24px;font-weight:600;letter-spacing:-0.015em;line-height:1.25}
.ct{font-size:16px;font-weight:600;line-height:1.35}
.big{font-size:26px;font-weight:600;letter-spacing:-0.015em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbl{font-size:13px;color:#4B4741;line-height:1.4}
.sub{font-size:14px;color:#4B4741}
.zone{font-size:13px;font-weight:600;color:#4B4741;display:flex;align-items:center;gap:8px;letter-spacing:.01em}
.zone span{font-weight:400}
.up{color:#2B7440;font-weight:600}.dn{color:#A73447;font-weight:600}.fl{color:#4B4741;font-weight:600}
.ok{color:#2B7440;font-weight:600}.bad{color:#A73447;font-weight:600}.warn-t{color:#8A5600;font-weight:600}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- Surfaces ---------- */
.card{border:1px solid #E4E7EC;border-radius:12px;background:#FFFFFF;padding:20px}
.hl{background:#FDF4F9;border:1px solid #FAE4F2;border-radius:12px;padding:20px}
.box{border:1px solid #E4E7EC;border-radius:12px;overflow-x:auto;background:#FFFFFF}

/* ---------- Buttons & controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:600;border:1px solid #E4E7EC;background:#FFFFFF;color:#1F1B16;cursor:pointer;white-space:nowrap;transition:background-color .15s ease-out,border-color .15s ease-out}
.btn:hover{background:#F7F8FA;color:#1F1B16}
.btn.p{background:#82326C;border-color:#82326C;color:#FFFFFF}.btn.p:hover{background:#672654;border-color:#672654;color:#FFFFFF}
.btn.q{border-color:transparent;background:transparent;color:#82326C;padding:0 8px}.btn.q:hover{background:#FDF4F9;color:#672654}
.btn.w{width:100%}
.btn svg{width:16px;height:16px}
.sel{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid #E4E7EC;border-radius:10px;background:#FFFFFF;font-size:14px;font-weight:500;color:#1F1B16;cursor:pointer;white-space:nowrap}
.sel svg{width:16px;height:16px;color:#4B4741;flex:none}
.inp{height:44px;width:100%;padding:0 12px 0 38px;border:1px solid #E4E7EC;border-radius:10px;font-family:inherit;font-size:14px;color:#1F1B16;background:#FFFFFF}
.srch{position:relative;display:flex;align-items:center}
.srch svg{position:absolute;left:12px;width:16px;height:16px;color:#4B4741}
.seg{display:inline-flex;border:1px solid #E4E7EC;border-radius:10px;padding:2px;gap:2px;background:#FFFFFF}
.seg button{height:40px;min-width:44px;padding:0 14px;border:0;border-radius:8px;background:transparent;font-size:14px;font-weight:500;color:#4B4741;cursor:pointer}
.seg button.on{background:#F2F4F7;color:#1F1B16;font-weight:600}
.chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:22px;border:1px solid #E4E7EC;font-size:14px;font-weight:500;color:#1F1B16;background:#FFFFFF;cursor:pointer}
.chip.on{background:#1F1B16;border-color:#1F1B16;color:#FFFFFF}
.tog{width:40px;height:24px;border-radius:12px;background:#D3D6DC;position:relative;flex:none;display:inline-block}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#FFFFFF;transition:left .15s ease-out}
.tog.on{background:#2B7440}.tog.on::after{left:19px}
.togbtn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;font-size:14px;font-weight:600;color:#1F1B16}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid #E4E7EC;overflow-x:auto;scrollbar-width:none}
.tab{height:44px;padding:0 12px;display:inline-flex;align-items:center;gap:8px;font-weight:500;color:#4B4741;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:#1F1B16}
.tab.on{color:#1F1B16;font-weight:600;border-bottom-color:#1F1B16}
.subtabs{display:flex;gap:6px;flex-wrap:wrap}
.subtabs a{height:36px;min-height:36px;padding:0 12px;border-radius:18px;display:inline-flex;align-items:center;color:#4B4741;font-weight:500}
.subtabs a.on{background:#F2F4F7;color:#1F1B16;font-weight:600}
.cnt{font-size:12px;font-weight:600;padding:1px 7px;border-radius:10px;background:#F2F4F7;color:#4B4741}
.cnt.err{background:#FBE9EC;color:#A73447}
.cnt.hot{background:#82326C;color:#FFFFFF}

/* ---------- Status ---------- */
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block}
.d-ok{background:#2B7440}.d-err{background:#A73447}.d-warn{background:#E3A33B}.d-off{background:#C5CAD3}.d-info{background:#32669A}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:6px;background:#F2F4F7;color:#1F1B16;font-size:12px;font-weight:600;white-space:nowrap}
.tag.err{background:#FBE9EC;color:#A73447}
.tag.ok{background:#EAF3EC;color:#2B7440}
.ic{flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;border:1px solid #E4E7EC;color:#1F1B16}
.ic svg{width:18px;height:18px}
.ic.err{background:#FBE9EC;border-color:#FBE9EC;color:#A73447}
.ic.warn{border:1.5px solid #E3A33B;color:#8A5600}
.ic.sh{border-color:#FAE4F2;background:#FFFFFF}

/* ---------- Alert list ---------- */
.al{display:flex;align-items:center;gap:16px;padding:16px 0;flex-wrap:wrap}
.al + .al{border-top:1px solid #E4E7EC}
.alt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}
.at{font-size:16px;font-weight:600;line-height:1.35}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.sub-rows{flex-basis:100%;margin-left:52px;display:flex;flex-direction:column}
.sr{display:flex;align-items:center;gap:12px;min-height:56px;border-top:1px solid #F0F2F5;flex-wrap:wrap;padding:6px 0}

/* ---------- Metric / trend ---------- */
.mc{display:flex;flex-direction:column;gap:6px;color:#1F1B16;min-width:0;transition:border-color .15s ease-out}
a.mc:hover{color:#1F1B16;border-color:#C5CAD3}
.spark{display:block;width:100%;height:32px;margin-top:8px}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv{font-size:20px;font-weight:600;letter-spacing:-.01em}

/* ---------- Grids ---------- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lrow{display:flex;align-items:center;gap:10px;min-height:48px}
.lrow + .lrow{border-top:1px solid #F0F2F5}

/* ---------- Tables ---------- */
.tr{display:grid;gap:16px;align-items:center;padding:8px 20px;min-height:60px;border-top:1px solid #F0F2F5}
.tr.h{min-height:44px;border-top:0;font-size:13px;color:#4B4741;font-weight:500}
.rt{text-align:right}
.av{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#F2F4F7;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#1F1B16}
.bar{height:8px;border-radius:4px;background:#F2F4F7;overflow:hidden;display:block}
.bar i{display:block;height:8px;border-radius:4px;background:#1F1B16}

/* ---------- Empty ---------- */
.es{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.esi{width:36px;height:36px;border-radius:10px;border:1px solid #E4E7EC;display:inline-flex;align-items:center;justify-content:center;color:#1F1B16;margin-bottom:4px}
.esi svg{width:18px;height:18px}
.calm{display:flex;align-items:center;gap:10px;min-height:44px;flex-wrap:wrap;font-size:16px}
.calm b{font-weight:600}
.calm span{color:#4B4741}

/* ---------- Motion ---------- */
.slidein{animation:kin .32s ease-out both}
@keyframes kin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.k *{animation:none!important;transition:none!important}}

/* ---------- Responsive ---------- */
.ph-only{display:none}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:minmax(0,1fr)}.g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.shell{grid-template-columns:minmax(0,1fr)}.dside{display:none}.ph-only{display:flex}.dtabs.ph-only{display:grid}.main{padding:20px 16px 40px}.h1{font-size:22px}.g2{grid-template-columns:minmax(0,1fr)}.sub-rows{margin-left:0}.k input,.k textarea,.k select{font-size:16px}}

/* ---------- Phone app kit (390px screens) ---------- */
.ph{width:390px;min-height:844px;display:flex;flex-direction:column;background:#FFFFFF}
.ph .h1{font-size:22px}
.pbar{position:sticky;top:0;z-index:5;height:56px;flex:none;display:flex;align-items:center;gap:2px;padding:0 6px;border-bottom:1px solid #E4E7EC;background:#FFFFFF}
.pib{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;border-radius:10px;color:#1F1B16;position:relative;cursor:pointer}
.pib svg{width:22px;height:22px}
.pbadge{position:absolute;top:6px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#82326C;color:#FFFFFF;font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.ptitle{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:44px;padding:0 6px;border:0;background:none;font-family:inherit;font-size:16px;font-weight:600;color:#1F1B16;text-align:left}
.ptitle span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmain{flex:1;padding:16px 16px 28px;display:flex;flex-direction:column;gap:20px}
.pchips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.pchips a,.pchips button{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:20px;border:1px solid #E4E7EC;background:#FFFFFF;font-family:inherit;font-size:14px;font-weight:500;color:#1F1B16;white-space:nowrap;cursor:pointer}
.pchips .on{background:#1F1B16;border-color:#1F1B16;color:#FFFFFF;font-weight:600}
.prow{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0}
.prow + .prow{border-top:1px solid #F0F2F5}
.pact{position:sticky;bottom:0;z-index:4;display:flex;gap:8px;padding:12px 16px;background:#FFFFFF;border-top:1px solid #E4E7EC}
.pact .btn{flex:1}
.pnav{position:sticky;bottom:0;z-index:5;flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid #E4E7EC;background:#FFFFFF;padding:6px 4px 14px}
.pnav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;font-size:11px;font-weight:600;color:#4B4741}
.pnav a:hover{color:#1F1B16}
.pnav .pi{display:inline-flex;align-items:center;justify-content:center;width:56px;height:30px;border-radius:15px}
.pnav svg{width:22px;height:22px}
.pnav a[aria-current="page"]{color:#672654}
.pnav a[aria-current="page"] .pi{background:#FAE4F2;color:#82326C}
.pnav .pbadge{top:0;right:calc(50% - 26px)}
.ph .card{padding:16px}
.ph .hl{padding:16px}
.ph .g2,.ph .g3,.ph .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ph .split{grid-template-columns:minmax(0,1fr)}
.ph input,.ph textarea,.ph select{font-size:16px}
/* Admin (Kelmo Controls) side menu groups */
.dnav__grp{margin:16px 10px 4px;font-size:13px;font-weight:600;color:#6B655E;letter-spacing:.01em}
.dnav a.dnav__add{margin-top:16px;color:#82326C;font-weight:600}
.dnav a.dnav__add svg{color:#82326C}
.dside .pop{display:none}
.pnav.n4{grid-template-columns:repeat(4,minmax(0,1fr))}