/* ============================================================================
   MITU HR Portal — Brand logo, loader, motion & responsive layer
   Adds animation + the MIT University Shillong wordmark WITHOUT changing the
   pumpkin/black/grey/white theme. Loads after theme.css.
   ============================================================================ */

/* ── Brand logo (official SVG artwork via <use href="#muArt">) ─────────────
   Black parts use currentColor (flip black↔white by context); the orange
   #f49200 is baked into the artwork and never changes. */
.mu-svg{display:block;color:var(--black);transition:transform .3s ease;flex-shrink:0}
.mu-on-dark{color:#f2f2f2}
.mu-svg-login{height:120px;width:147px;margin:0 auto 14px}
.mu-svg-mark{height:38px;width:71px}

/* ── Full-screen loading animation (CSS-only; auto-fades, no JS needed) ───── */
.mu-loader{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;
  background:radial-gradient(1000px 500px at 50% 8%,rgba(255,117,24,.16),transparent),
  linear-gradient(160deg,#0E0F12,#1b1d22 60%,#23262d);
  animation:muLoaderOut .7s ease 1.55s forwards}
.mu-loader-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.mu-loader svg.mu-lg{width:205px;height:167px;color:#f2f2f2}
.mu-lg-mit{opacity:0;animation:muWordIn .7s cubic-bezier(.2,.7,.3,1) .25s forwards}
.mu-lg-dot{animation:muDotDrop .9s cubic-bezier(.3,1.4,.5,1) both}
.mu-lg-uni{opacity:0;animation:muRise .6s ease .6s forwards}
.mu-lg-shl{opacity:0;animation:muRise .6s ease .75s forwards}
.mu-loader-bar{width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--pk),transparent);
  animation:muBar 1.2s ease .4s forwards}
@keyframes muDotDrop{0%{transform:translateY(-130px);opacity:0}
  55%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes muWordIn{0%{opacity:0;transform:translateY(10px) scale(.98)}
  100%{opacity:1;transform:none}}
@keyframes muBar{0%{width:0;opacity:0}30%{opacity:1}100%{width:190px;opacity:.85}}
@keyframes muLoaderOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.mu-loader{pointer-events:none}
body.mu-noanim .mu-loader{display:none}
.mu-loader.done{display:none !important}

/* ── Page transitions (enhanced) ──────────────────────────────────────────── */
.page.active{animation:muPageIn .26s ease-out}
@keyframes muPageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes muRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Staggered entrance for KPIs & cards when a page becomes active */
.page.active .kpi,.page.active .card{animation:muRise .5s both}
.page.active .kpi:nth-child(2),.page.active .card:nth-child(2){animation-delay:.05s}
.page.active .kpi:nth-child(3),.page.active .card:nth-child(3){animation-delay:.1s}
.page.active .kpi:nth-child(4),.page.active .card:nth-child(4){animation-delay:.15s}
.page.active .kpi:nth-child(5){animation-delay:.2s}

/* Sidebar nav items slide in with a stagger */
.ni{animation:muNavIn .4s both}
.ng:nth-child(2) .ni{animation-delay:.03s}
.ng:nth-child(3) .ni{animation-delay:.06s}
@keyframes muNavIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* Modal entrance */
.mbg.open .modal,.mbg.open .mcard,.mbg.open>div{animation:muModalIn .28s cubic-bezier(.2,.7,.3,1)}
@keyframes muModalIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

/* ── Futuristic micro-interactions (motion only, no colour changes) ───────── */
.card{transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-3px)}
.btn,.btn.prim,.btn.sm{transition:transform .12s ease,background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:active{transform:scale(.96)}
.ni{transition:transform .16s ease,background .18s,box-shadow .2s}
.ni:hover{transform:translateX(3px)}
.kpi{transition:transform .2s ease,box-shadow .2s ease}
.kpi:hover{transform:translateY(-2px)}
.tab{transition:color .18s}
.dt tbody tr{transition:background .15s}
.uchip{transition:transform .15s}.uchip:hover{transform:translateY(-1px)}
.brand:hover .mu-svg{transform:scale(1.05)}

/* Live pulse: gentle glow ring */
.pulse{box-shadow:0 0 0 0 rgba(255,117,24,.6);animation:muPulse 2s infinite}
@keyframes muPulse{0%{box-shadow:0 0 0 0 rgba(255,117,24,.5)}70%{box-shadow:0 0 0 7px rgba(255,117,24,0)}100%{box-shadow:0 0 0 0 rgba(255,117,24,0)}}

/* ── Mobile: turn the hidden sidebar into a slide-in drawer ───────────────── */
.mu-burger{display:none;background:transparent;border:0;color:#fff;font-size:20px;
  cursor:pointer;padding:6px 8px;border-radius:8px;line-height:1}
.mu-burger:active{transform:scale(.9)}
.mu-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;
  transition:.3s;z-index:400}
.mu-scrim.open{opacity:1;visibility:visible}

@media(max-width:920px){
  .mu-burger{display:inline-flex;align-items:center}
  .sidebar{position:fixed !important;left:0;top:var(--th);bottom:0;z-index:500;width:262px;
    display:flex !important;transform:translateX(-100%);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .sidebar.open{transform:none;box-shadow:0 0 50px rgba(0,0,0,.5)}
  .brand{min-width:0}
  .bname{font-size:13px}.bsub{display:none}
  .tsr{display:none}
  .page{padding:16px 14px 60px}
  .ph{flex-direction:column;align-items:flex-start;gap:10px}
  .pha{width:100%;flex-wrap:wrap}
  .mu-svg-login{height:96px;width:118px}
  .mu-loader svg.mu-lg{width:170px;height:139px}
}
@media(max-width:520px){
  .topbar{padding:0 10px;gap:8px}
  .trgt{gap:6px}
  .uchip span{display:none}
  .tabs{overflow-x:auto;flex-wrap:nowrap}
  .kg,.kg4{grid-template-columns:1fr 1fr}
}

/* ── Chat / messaging ─────────────────────────────────────────────────────── */
.chat-wrap{display:flex;flex-direction:column;height:min(62vh,560px)}
.chat-scroll{flex:1;overflow-y:auto;padding:14px;background:var(--s2,#f6f7f9);border:1px solid var(--bd);border-radius:var(--rs);display:flex;flex-direction:column;gap:8px}
.chat-row{display:flex;max-width:78%}
.chat-row.me{align-self:flex-end;justify-content:flex-end}
.chat-row.them{align-self:flex-start}
.chat-bub{padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.45;box-shadow:0 1px 2px rgba(0,0,0,.06);animation:muRise .25s both}
.chat-row.them .chat-bub{background:#fff;border:1px solid var(--bd);border-bottom-left-radius:4px}
.chat-row.me .chat-bub{background:linear-gradient(135deg,var(--pk),var(--pk2,#f49200));color:#fff;border-bottom-right-radius:4px}
.chat-meta{font-size:10.5px;opacity:.7;margin-bottom:2px;font-weight:600}
.chat-input{display:flex;gap:8px;margin-top:10px}
.chat-input input{flex:1;padding:11px 14px;border:1.5px solid var(--bds);border-radius:22px;font-size:13px;outline:none}
.chat-input input:focus{border-color:var(--pk)}
.chat-list{display:flex;flex-direction:column;gap:2px}
.chat-li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--rs);cursor:pointer;border:1px solid transparent;transition:background .15s}
.chat-li:hover{background:var(--pk-soft)}
.chat-li.active{background:var(--pk-soft);border-color:var(--pk-line)}
.chat-empty{color:var(--mu);text-align:center;padding:30px;font-size:13px}

/* ── Floating messenger (LinkedIn-style, docks over the whole dashboard) ───── */
.msgr{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.msgr>*{pointer-events:auto}
.msgr-launch{width:58px;height:58px;border-radius:50%;background:#fff;color:#131610;border:2px solid var(--pk);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.22);position:relative;display:grid;place-items:center;transition:transform .2s}
.msgr-launch:hover{transform:scale(1.08)}
.msgr-logo{width:34px;height:auto;color:#131610}
.msgr-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#e5484d;color:#fff;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;border:2px solid #fff}
.msgr-badge.show{display:flex}
.msgr-launch.blink{animation:msgrBlink 1.1s ease-in-out infinite}
@keyframes msgrBlink{0%,100%{box-shadow:0 8px 24px rgba(229,72,77,.5)}50%{box-shadow:0 8px 30px rgba(229,72,77,.95),0 0 0 7px rgba(229,72,77,.22)}}
.msgr-panel{width:300px;max-height:62vh;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden;display:none;flex-direction:column}
.msgr-panel.open{display:flex;animation:muRise .2s both}
.msgr-phead{padding:12px 14px;background:var(--black);color:#fff;font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.msgr-sec{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);padding:9px 14px 3px}
.msgr-plist{overflow-y:auto}
.msgr-ci{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--bd);font-size:13px}
.msgr-ci:hover{background:var(--pk-soft)}
.msgr-dot{width:9px;height:9px;border-radius:50%;background:#e5484d;flex-shrink:0}
.msgr-win{width:300px;height:404px;background:#fff;border:1px solid var(--bd);border-radius:14px 14px 0 0;box-shadow:0 20px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;animation:muRise .2s both}
.msgr-win.min{height:44px}
.msgr-whead{padding:0 12px;height:44px;flex-shrink:0;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:13px;font-weight:700}
.msgr-whead .x{cursor:pointer;opacity:.8;padding:2px 5px}.msgr-whead .x:hover{opacity:1}
.msgr-wscroll{flex:1;overflow-y:auto;padding:12px;background:var(--s2,#f6f7f9);display:flex;flex-direction:column;gap:6px}
.msgr-win.min .msgr-wscroll,.msgr-win.min .msgr-winput{display:none}
.msgr-winput{display:flex;gap:6px;padding:8px;border-top:1px solid var(--bd)}
.msgr-winput input{flex:1;padding:8px 12px;border:1.5px solid var(--bds);border-radius:18px;font-size:12.5px;outline:none}
.msgr-winput input:focus{border-color:var(--pk)}
.msgr-b{max-width:82%;padding:7px 11px;border-radius:12px;font-size:12.5px;line-height:1.4;animation:muRise .2s both}
.msgr-b.me{align-self:flex-end;border-bottom-right-radius:3px}
.msgr-b.them{align-self:flex-start;border-bottom-left-radius:3px}
.msgr-b.role-staff{background:linear-gradient(135deg,var(--pk),var(--pk2,#f49200));color:#fff}
.msgr-b.role-cand{background:#dff3ef;color:#0f5d52;border:1px solid #b6e0d8}
.msgr-b .who{font-size:10px;opacity:.75;font-weight:700;margin-bottom:1px}
.msgr-b .tm{font-size:9.5px;opacity:.6;text-align:right;margin-top:1px}
.msgr-b a{color:inherit;text-decoration:underline}
.msgr-b ul,.msgr-b ol{margin:3px 0 3px 18px}
.msgr-b p{margin:0 0 4px}.msgr-b p:last-child{margin:0}
.msgr-tools{display:flex;align-items:center;gap:1px;padding:4px 6px;border-top:1px solid var(--bd);background:#fafafb}
.msgr-tools button,.msgr-attach{border:none;background:transparent;cursor:pointer;font-size:13px;padding:3px 7px;border-radius:6px;color:#3a3f47;line-height:1}
.msgr-tools button:hover,.msgr-attach:hover{background:var(--pk-soft)}
.msgr-attach{display:inline-flex;align-items:center}
.msgr-fname{font-size:10px;color:var(--pk3);margin-left:auto;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgr-inrow{display:flex;gap:6px;padding:8px;align-items:flex-end}
.msgr-editor{flex:1;min-height:20px;max-height:92px;overflow-y:auto;padding:8px 12px;border:1.5px solid var(--bds);border-radius:14px;font-size:12.5px;outline:none;line-height:1.4;text-align:left}
.msgr-editor:focus{border-color:var(--pk)}
.msgr-editor:empty:before{content:attr(data-ph);color:#9aa1ab}
.msgr-editor ul,.msgr-editor ol{margin:2px 0 2px 18px}
.msgr-send{border:none;background:linear-gradient(135deg,var(--pk),var(--pk2,#f49200));color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:14px;flex-shrink:0}
@media(max-width:560px){.msgr-win{width:84vw}.msgr-panel{width:78vw}}

/* ── Announcement marquee (under the topbar) ──────────────────────────────── */
.mu-ticker{height:32px;background:var(--pk-soft);border-bottom:1px solid var(--pk-line);display:flex;align-items:center;overflow:hidden;font-size:12.5px;font-weight:600;color:var(--pk3);flex-shrink:0}
.mu-ticker-track{overflow:hidden;white-space:nowrap;flex:1}
#muTickerText{display:inline-block;padding-left:100%;animation:muTick 40s linear infinite;will-change:transform}
@keyframes muTick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){#muTickerText{animation:none!important;padding-left:0;white-space:normal}}
.mu-ticker:hover #muTickerText{animation-play-state:paused}

/* ── Formal letter document ───────────────────────────────────────────────── */
.letterdoc{background:#fff;padding:24px 28px;border:1px solid var(--bd);border-radius:var(--rs)}
.letterdoc .lh{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--pk);padding-bottom:12px}
@media print{
  body *{visibility:hidden}
  .letterdoc,.letterdoc *{visibility:visible}
  .letterdoc{position:absolute;left:0;top:0;width:100%;border:none;border-radius:0;padding:0}
  .mbg,.modal,.mcard{box-shadow:none !important}
}

/* ── Respect reduced-motion & keep everything fast ────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .mu-loader{animation:muLoaderOut .3s forwards}
}

/* ── Organisation chart & hierarchy ──────────────────────────────────────
   The chart is data, not a picture: every node below is rendered from
   org_positions, so renaming a post in Settings changes the chart.        */
.orgwrap{background:linear-gradient(180deg,#fbfaf8 0%,#f4f2ee 100%);border:1px solid var(--bd,#e4e2dd);border-radius:14px;padding:26px 22px;overflow-x:auto}
.org-spine{display:flex;flex-direction:column;align-items:center;gap:0}
.org-node{background:#fff;border:1.5px solid #e4e2dd;border-radius:12px;padding:11px 18px;text-align:center;min-width:180px;
          box-shadow:0 1px 2px rgba(20,20,20,.05);transition:.16s;position:relative}
.org-node:hover{border-color:var(--pk,#ff7518);box-shadow:0 4px 14px rgba(244,146,0,.18);transform:translateY(-1px)}
.org-node .ot{font-size:13.5px;font-weight:700;line-height:1.25;color:#16181d}
.org-node .os{font-size:11px;color:#7b7f88;margin-top:2px;font-weight:600;letter-spacing:.2px}
.org-node .ocount{display:inline-block;margin-top:5px;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;
                  background:#f2f1ed;color:#5c616b}
.org-node.lead{background:linear-gradient(135deg,#16181d,#2a2f38);border-color:#16181d}
.org-node.lead .ot{color:#fff}
.org-node.lead .os{color:#b9bcc2}
.org-node.acad{border-left:5px solid #7c3aed}
.org-node.admin{border-left:5px solid #0e7490}
.org-node.gov{border-style:dashed;background:#fdfbf6;border-color:#e0d4b8}
.org-connect{width:2px;height:20px;background:#d8d5cf}
.org-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;padding-top:18px}
.org-row::before{content:'';position:absolute;top:0;left:10%;right:10%;height:2px;background:#d8d5cf}
.org-branch{display:flex;flex-direction:column;align-items:center;position:relative}
.org-branch::before{content:'';position:absolute;top:-18px;left:50%;width:2px;height:18px;background:#d8d5cf}
/* indented sub-tree */
.org-tree{list-style:none;margin:0;padding:0 0 0 4px}
.org-tree li{list-style:none;position:relative;padding:3px 0 3px 22px}
.org-tree li::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:1.5px;background:#e0ddd7}
.org-tree li:last-child::before{height:16px}
.org-tree li::after{content:'';position:absolute;left:6px;top:16px;width:13px;height:1.5px;background:#e0ddd7}
.org-leaf{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e6e4df;border-radius:8px;
          padding:6px 12px;font-size:12.5px;font-weight:600;color:#26292f}
.org-leaf:hover{border-color:var(--pk,#ff7518)}
.org-leaf .pill{font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;background:#f2f1ed;color:#6b6f79}
.org-toggle{cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:7px}
.org-toggle .caret{transition:transform .18s;font-size:10px;color:#9aa0aa}
.org-toggle.open .caret{transform:rotate(90deg)}
.org-div-h{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:1.4px;
           text-transform:uppercase;color:#7b7f88;margin:14px 0 6px}
.org-div-h .dot{width:9px;height:9px;border-radius:50%}
.org-node.gov{background:#fdfbf6;border:1.5px dashed #d9c9a3}
.org-node.gov .ot{color:#5c4a22}
.org-node.gov .os{color:#9a8558}

/* ── Attendance calendar ─────────────────────────────────────────────────
   One cell per calendar day, coloured by what actually happened. */
.acgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.acdow{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#8a8e96;text-align:center;padding:4px 0}
.accell{aspect-ratio:1;border-radius:9px;border:1px solid #e6e4df;background:#fff;padding:6px;display:flex;
        flex-direction:column;justify-content:space-between;min-height:56px;transition:.14s}
.accell:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(20,20,20,.08)}
.accell .d{font-size:12.5px;font-weight:700;color:#41454d}
.accell .l{font-size:9.5px;font-weight:600;line-height:1.15;opacity:.85}
.accell.present{background:#eaf7ee;border-color:#bfe3c9}.accell.present .d{color:#1b6e36}
.accell.halfday{background:#fff7e6;border-color:#f3d9ac}.accell.halfday .d{color:#8a5a00}
.accell.leave{background:#fff1e6;border-color:#ffd0ac}.accell.leave .d{color:#b45309}
.accell.absent{background:#fdecea;border-color:#f5c2be}.accell.absent .d{color:#a5251a}
.accell.holiday{background:#eef2ff;border-color:#c9d3f5}.accell.holiday .d{color:#3b4ea8}
.accell.weekoff{background:#f5f4f1;border-color:#e6e4df}.accell.weekoff .d{color:#9aa0aa}
.accell.norecord{background:#fafaf8;border-style:dashed}.accell.norecord .d{color:#b4b8c0}
.accell.future{background:#fff;border-style:dashed;opacity:.5}
.acleg{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:#6b6f79;align-items:center}
.acleg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1px solid rgba(0,0,0,.08)}

/* ── Web punch card ──────────────────────────────────────────────────────── */
.punch-big{font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.punch-state{font-size:12.5px;color:var(--mu);margin-top:4px}
.punch-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.punch-list{margin-top:12px;font-size:12.5px;display:flex;flex-direction:column;gap:4px}
.punch-list .p{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed var(--bd)}
.mode-office{background:#eaf7ee;color:#15803d;border:1px solid #bfe3c9;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700}
.mode-remote{background:#e8eefb;color:#1d4ed8;border:1px solid #c3d4fb;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700}
.punch-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.punch-kpis div{background:var(--bgc);border:1px solid var(--bds);border-radius:var(--rs);padding:8px 10px;font-size:11.5px;color:var(--mu)}
.punch-kpis b{display:block;font-size:16px;color:var(--ink);font-family:var(--mono)}
@media(max-width:640px){.punch-kpis{grid-template-columns:repeat(2,1fr)}}

/* ── My Space (employee home, Zoho-style) ───────────────────────────────── */
.sp-wrap{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.sp-wrap{grid-template-columns:1fr}}
.sp-hero{height:118px;border-radius:var(--r) var(--r) 0 0;background:radial-gradient(600px 200px at 20% 0%,rgba(244,146,0,.35),transparent),linear-gradient(120deg,#0f2d1f,#16181d 60%,#23262d);position:relative}
.sp-prof{background:#fff;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.sp-avatar{position:relative;z-index:2;width:104px;height:104px;border-radius:18px;border:4px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.18);margin:-58px auto 0;display:block;object-fit:cover;background:#fff}
.sp-avatar.ini{display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pk),var(--pk2))}
.sp-name{text-align:center;padding:10px 14px 0}
.sp-name b{font-size:15px}.sp-name .code{color:var(--mu);font-weight:500}
.sp-name .desig{font-size:12.5px;color:var(--mu);margin-top:2px}
.sp-status{text-align:center;margin-top:8px;font-weight:700;font-size:13px}
.sp-status.g{color:#15803d}.sp-status.r{color:#c2410c}.sp-status.a{color:#b45309}.sp-status.m{color:var(--mu)}
.sp-clock{display:flex;justify-content:center;gap:4px;align-items:center;margin:10px 0 4px;font-family:var(--mono)}
.sp-clock span{background:var(--bgc);border:1px solid var(--bds);border-radius:8px;padding:6px 8px;font-size:20px;font-weight:700;min-width:44px;text-align:center}
.sp-clock i{font-style:normal;color:var(--mu);font-weight:700}
.sp-btnrow{display:flex;justify-content:center;gap:8px;padding:8px 14px 14px;flex-wrap:wrap;align-items:center}
.sp-card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:14px;margin-top:12px}
.sp-card h4{font-size:13.5px;font-weight:700;margin:0 0 10px}
.sp-person{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--bd)}
.sp-person:first-of-type{border-top:none}
.sp-person .av{flex-shrink:0}
.sp-person .n{font-size:12.5px;font-weight:600}.sp-person .n small{color:var(--mu);font-weight:500}
.sp-person .st{font-size:11.5px;font-weight:700}.st.g{color:#15803d}.st.r{color:#c2410c}.st.a{color:#b45309}.st.m{color:var(--mu)}
.sp-tabs{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:0 8px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{padding:14px 14px;font-size:13.5px;font-weight:600;color:var(--mu);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;position:relative}
.sp-tab:hover{color:var(--ink)}.sp-tab.active{color:var(--ink);border-bottom-color:var(--pk)}
.sp-tab .bd{position:absolute;top:8px;right:2px;background:var(--pk);color:#fff;border-radius:99px;font-size:9.5px;padding:0 5px;font-weight:800}
.sp-panel{margin-top:12px}
.sp-panel.enter{animation:muTabIn .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes muTabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sp-greet{background:linear-gradient(90deg,#fff,#fff 70%,#fff6e8);display:flex;align-items:center;gap:16px}
.sp-greet img{height:54px}
.sp-greet .t{font-size:17px;font-weight:700}.sp-greet .s{font-size:12.5px;color:var(--mu)}
.sp-sun{margin-left:auto;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ffd27a,#f49200);box-shadow:0 0 30px rgba(244,146,0,.35)}
.sp-shift{background:var(--bgc);border-left:3px solid var(--mu);border-radius:6px;padding:8px 12px;font-size:12.5px;margin:10px 0 14px}
.sp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;border-top:1px solid var(--bd);padding-top:14px}
.sp-day{text-align:center;position:relative;padding-top:8px}
.sp-day::before{content:'';position:absolute;top:-1px;left:50%;width:7px;height:7px;border-radius:50%;background:#cfd2d8;transform:translate(-50%,-50%)}
.sp-day.today::before{background:var(--bl);box-shadow:0 0 0 3px #dbe6ff}
.sp-day .d{font-size:13px;font-weight:600}.sp-day.today .d b{background:var(--bl);color:#fff;border-radius:5px;padding:0 5px}
.sp-day .l{font-size:12px;font-weight:700;margin-top:3px}.sp-day .h{font-size:11.5px;color:var(--mu)}
.l.g{color:#15803d}.l.r{color:#c2410c}.l.a{color:#d97706}.l.m{color:var(--mu)}
.sp-sub{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.sp-sub span{padding:6px 12px;border-radius:99px;border:1px solid var(--bds);font-size:12.5px;font-weight:600;cursor:pointer;color:var(--mu)}
.sp-sub span.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.sp-feed{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--bd);font-size:12.5px}
.sp-feed:first-child{border-top:none}
.sp-feed time{color:var(--mu);white-space:nowrap;font-size:11.5px}
.sp-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 18px;font-size:12.5px}
.sp-kv div{padding:6px 0;border-bottom:1px solid var(--bd)}.sp-kv b{display:block;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--mu);font-weight:700}


@media(prefers-reduced-motion:reduce){.sp-panel.enter{animation:none}#muBar{display:none}}

/* ── Module transition: slim progress bar under the top bar ─────────────── */
#muBar{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--pk),#ffb266);z-index:99990;opacity:0;pointer-events:none;box-shadow:0 0 8px rgba(244,146,0,.6)}
#muBar.run{animation:muBar .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes muBar{0%{width:0;opacity:1}70%{width:85%;opacity:1}100%{width:100%;opacity:0}}
.sp-panel.enter{animation:muTabIn .22s ease-out both}
@keyframes muTabIn{from{opacity:0}to{opacity:1}}

/* ── My Space v2 (Zoho-style) ───────────────────────────────────────────── */
.sp-hero{height:190px;border-radius:var(--r);position:relative;overflow:hidden;
  background:
    radial-gradient(180px 120px at 12% 20%,rgba(120,200,120,.28),transparent 70%),
    radial-gradient(220px 140px at 85% 15%,rgba(90,170,100,.25),transparent 70%),
    radial-gradient(160px 110px at 60% 90%,rgba(60,140,80,.3),transparent 70%),
    radial-gradient(120px 90px at 35% 70%,rgba(150,210,140,.18),transparent 70%),
    linear-gradient(120deg,#0b2416,#0f3a22 55%,#17462c)}
.sp-hero::after{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.035) 46px 48px),
  repeating-linear-gradient(35deg,transparent 0 62px,rgba(0,0,0,.12) 62px 64px)}
.sp-hero .acts{position:absolute;right:16px;top:16px;display:flex;gap:8px;z-index:2}
.sp-hero .acts .btn{background:#fff;border-color:#fff}
.sp-wrap{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start;margin-top:-52px;padding:0 14px}
@media(max-width:900px){.sp-wrap{grid-template-columns:1fr;margin-top:-40px}}
.sp-prof{background:#fff;border:1px solid var(--bd);border-radius:var(--r);overflow:visible;padding-top:0}
.sp-avatar{position:relative;z-index:3;width:120px;height:120px;border-radius:16px;border:4px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.22);margin:-70px auto 0;display:block;object-fit:cover;background:#fff}
.sp-avatar.ini{display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pk),var(--pk2))}
.sp-name{text-align:center;padding:12px 14px 0}
.sp-name b{font-size:15.5px}.sp-name .code{color:var(--mu);font-weight:500}
.sp-name .desig{font-size:13px;color:var(--mu);margin-top:2px}
.sp-status{text-align:center;margin-top:12px;font-weight:600;font-size:14px}
.sp-clock{display:flex;justify-content:center;gap:6px;align-items:center;margin:12px 0 6px;font-family:var(--mono)}
.sp-clock span{background:#f3f4f6;border:none;border-radius:8px;padding:8px 6px;font-size:20px;font-weight:600;min-width:46px;text-align:center;color:#374151}
.sp-clock i{font-style:normal;color:#6b7280;font-weight:700}
.sp-btnrow{display:flex;justify-content:center;gap:10px;padding:8px 14px 16px;flex-wrap:wrap;align-items:center}
.btn.outl-red{background:#fff;color:#dc2626;border:1.5px solid #dc2626;font-weight:600}
.btn.outl-red:hover{background:#fef2f2}
.btn.outl-green{background:#fff;color:#15803d;border:1.5px solid #15803d;font-weight:600}
.btn.outl-green:hover{background:#f0fdf4}
.sp-tabs{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:0 10px;display:flex;gap:4px;align-items:center;position:relative}
.sp-tab{padding:18px 14px;font-size:14px;font-weight:500;color:#4b5563;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;position:relative;transition:color .15s}
.sp-tab:hover{color:var(--ink)}.sp-tab.active{color:var(--ink);font-weight:700;border-bottom-color:var(--bl)}
.sp-tab.more{margin-left:auto;font-size:18px;letter-spacing:2px;padding:12px 10px}
.sp-menu{position:absolute;right:10px;top:56px;background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:var(--shd2);z-index:50;min-width:200px;padding:6px;display:none}
.sp-menu.open{display:block}
.sp-menu div{padding:9px 12px;font-size:13px;border-radius:7px;cursor:pointer}.sp-menu div:hover{background:var(--pk-soft)}
.sp-card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:16px;margin-top:14px}
.sp-card h4{font-size:15px;font-weight:600;margin:0 0 12px}
.sp-person{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--bd)}
.sp-person .n{font-size:13px;font-weight:600}.sp-person .n small{color:var(--mu);font-weight:500}
.sp-person .st{font-size:12.5px;font-weight:600;margin-top:2px}
.sp-greet{display:flex;align-items:center;gap:18px;padding:18px 20px;background:linear-gradient(90deg,#fff 60%,#eef4fb)}
.sp-greet .lg{background:#fff;border:1px solid var(--bd);border-radius:8px;padding:10px 12px}
.sp-greet img{height:56px;display:block}
.sp-greet .t{font-size:18px;font-weight:600}.sp-greet .t b{font-weight:700}.sp-greet .s{font-size:13.5px;color:#4b5563;margin-top:4px}
.sp-sun{margin-left:auto;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 45% 45%,#ffe08a,#f6b73c 65%,#f49200);box-shadow:0 0 0 10px rgba(246,183,60,.18),0 0 34px rgba(244,146,0,.35)}
.sp-ic{width:48px;height:48px;border-radius:12px;background:#e8f0fb;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.sp-head{display:flex;gap:14px;align-items:flex-start}
.sp-head h3{font-size:16px;font-weight:600;margin:0}.sp-head .sub{font-size:13.5px;color:#4b5563;margin-top:4px}
.sp-shift{background:#f3f4f6;border-left:4px solid #6b7280;border-radius:6px;padding:10px 14px;font-size:13px;margin:16px 0 22px}
.sp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:0;position:relative;padding-top:14px}
.sp-week::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:#e5e7eb}
.sp-day{text-align:left;position:relative;padding:0 8px 0 4px}
.sp-day::before{content:'';position:absolute;top:-14px;left:2px;width:8px;height:8px;border-radius:50%;background:#d1d5db;transform:translateY(-3px)}
.sp-day.today::before{background:var(--bl);box-shadow:0 0 0 3px #dbe6ff}
.sp-day .d{font-size:14px;color:#374151}.sp-day .d b{font-weight:700;color:#111827}.sp-day.today .d b{background:var(--bl);color:#fff;border-radius:4px;padding:0 5px}
.sp-day .l{font-size:13.5px;font-weight:600;margin-top:4px}.sp-day .h{font-size:13px;color:#374151;margin-top:2px}
/* Horizontal day timeline (timer chart) */
.tl-wrap{margin-top:18px}
.tl-bar{position:relative;height:34px;background:#f3f4f6;border-radius:8px;overflow:hidden}
.tl-seg{position:absolute;top:6px;height:22px;border-radius:6px;background:linear-gradient(180deg,#34d399,#15803d);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tl-seg.open{background:repeating-linear-gradient(45deg,#34d399 0 8px,#22c55e 8px 16px)}
.tl-shift{position:absolute;top:0;bottom:0;background:rgba(59,130,246,.10);border-left:1px dashed #93c5fd;border-right:1px dashed #93c5fd}
.tl-now{position:absolute;top:0;bottom:0;width:2px;background:#ef4444}
.tl-now::after{content:'now';position:absolute;top:-2px;left:5px;font-size:10px;color:#ef4444;font-weight:700}
.tl-ticks{position:relative;height:16px;margin-top:4px;font-size:10.5px;color:#6b7280}
.tl-ticks span{position:absolute;transform:translateX(-50%)}
.tl-legend{display:flex;gap:14px;font-size:11.5px;color:#4b5563;margin-top:6px}
.tl-legend i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}
/* compact check-in strip for the executive dashboard */
.ci-strip{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:10px 16px;margin-bottom:14px;flex-wrap:wrap}
.ci-strip .clk{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:1px}
.ci-strip .who{font-size:13px}.ci-strip .who b{display:block}
.ci-strip .st{font-weight:600;font-size:13px}
.ci-strip .sp{flex:1}

/* ── My Space v3 — MITU's own design ────────────────────────────────────── */
.sp3{--acc:#f49200;--acc2:#ff7518;--acc-soft:#fff3e6}
.sp3.acc-ink{--acc:#16181d;--acc2:#3a3f49;--acc-soft:#eef0f3}
.sp3.acc-green{--acc:#15803d;--acc2:#22c55e;--acc-soft:#eaf7ee}
.sp3.acc-blue{--acc:#1d4ed8;--acc2:#3b82f6;--acc-soft:#e8eefb}
.sp3.acc-plum{--acc:#7e22ce;--acc2:#a855f7;--acc-soft:#f3e8ff}
.id-banner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;border-radius:var(--r);color:#fff;
  background:linear-gradient(105deg,#16181d 0%,#23262d 55%,var(--acc) 140%);position:relative;overflow:hidden}
.id-banner::before{content:'';position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--acc2),transparent 70%);opacity:.55}
.id-banner::after{content:'';position:absolute;left:-40px;bottom:-90px;width:200px;height:200px;border-radius:50%;border:26px solid rgba(255,255,255,.05)}
.id-left{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.id-avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.85);box-shadow:0 6px 20px rgba(0,0,0,.35);background:#fff}
.id-avatar.ini{display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.id-name{font-size:20px;font-weight:700;letter-spacing:-.2px}
.id-meta{font-size:12.5px;color:#c3c6cb;margin-top:2px}
.id-status{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.id-status.g{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.45);color:#86efac}
.id-status.r{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.4);color:#fca5a5}
.id-status.a{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.4);color:#fcd34d}
.id-status.m{color:#e5e7eb}
.id-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;position:relative;z-index:1}
.id-clock{display:flex;gap:4px;align-items:center;font-family:var(--mono)}
.id-clock span{font-size:30px;font-weight:700;letter-spacing:-1px;min-width:44px;text-align:center}
.id-clock i{font-style:normal;color:#9aa0ab;font-weight:700;font-size:22px}
.id-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn.id-in{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700;padding:9px 18px}
.btn.id-in:hover{filter:brightness(1.08)}
.btn.id-out{background:transparent;border:1.5px solid #fca5a5;color:#fecaca;font-weight:700;padding:9px 18px}
.btn.id-out:hover{background:rgba(239,68,68,.15)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#e5e7eb}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.id-remote{font-size:12px;color:#d1d5db;display:flex;align-items:center;gap:5px}
@media(max-width:760px){.id-banner{flex-direction:column;align-items:stretch}.id-right{align-items:flex-start}}
.chipnav{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px;align-items:center}
.chip{padding:8px 14px;border-radius:99px;border:1px solid var(--bds);background:#fff;font-size:13px;font-weight:600;color:#4b5563;cursor:pointer;transition:all .15s;position:relative}
.chip:hover{border-color:var(--acc);color:var(--ink)}
.chip.active{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.chip b{margin-left:6px;background:#fff;color:var(--acc);border-radius:99px;font-size:10.5px;padding:0 6px}
.chip.ghost{margin-left:auto;background:var(--acc-soft);border-color:transparent;color:var(--ink)}
.chip.ghost+.chip.ghost{margin-left:0}
.wg-greet{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 12px}
.wg-greet .g1{font-size:19px;font-weight:700}.wg-greet .g2{font-size:12.5px;color:var(--mu);margin-top:2px}
.wg-greet img{height:40px;opacity:.9}
.wg-grid{display:grid;gap:14px}
.wg-grid.cols-2{grid-template-columns:1fr 1fr}.wg-grid.cols-1{grid-template-columns:1fr}
@media(max-width:900px){.wg-grid.cols-2{grid-template-columns:1fr}}
.wg{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;border-top:3px solid var(--acc)}
.wg[data-w="today"]{grid-column:1 / -1}
.wg-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.wg-h h4{font-size:14px;font-weight:700;margin:0}
.wg-ic{width:30px;height:30px;border-radius:8px;background:var(--acc-soft);display:flex;align-items:center;justify-content:center;font-size:15px}
.wg-big{font-family:var(--mono);font-size:32px;font-weight:700;letter-spacing:-.5px}
.wg-sub{font-size:12.5px;color:var(--mu);margin-top:4px}
.wk-rail{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.wk-day{text-align:center;padding:8px 2px;border-radius:10px;background:var(--bgc)}
.wk-day.today{background:var(--acc-soft);outline:1.5px solid var(--acc)}
.wk-d{font-size:11.5px;color:var(--mu)}.wk-d b{display:block;font-size:15px;color:var(--ink)}
.wk-l{font-size:11.5px;font-weight:700;margin-top:4px;line-height:1.2}.wk-l.g{color:#15803d}.wk-l.r{color:#c2410c}.wk-l.a{color:#b45309}.wk-l.m{color:var(--mu)}
.wk-h{font-size:11px;color:var(--mu);margin-top:2px}
.bal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.bal-grid div{background:var(--bgc);border-radius:10px;padding:10px;text-align:center}
.bal-grid b{display:block;font-family:var(--mono);font-size:20px}.bal-grid span{font-size:11px;color:var(--mu)}
.sp3.compact .wg{padding:12px 14px}.sp3.compact .wg-grid{gap:10px}.sp3.compact .id-banner{padding:14px 18px}
.cz-row{display:flex;justify-content:space-between;align-items:center;padding:7px 4px;border-bottom:1px solid var(--bd);font-size:13px}
.cz-row span{display:flex;gap:4px}

/* ── Communications: pick an audience by ticking chips ──────────────────── */
.chipsel{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1.5px solid var(--bds);
  border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;background:var(--s1);user-select:none}
.chipsel:hover{border-color:var(--pu)}
.chipsel input{margin:0;cursor:pointer}
.chipsel:has(input:checked){background:var(--s2);border-color:var(--pu);color:var(--pu)}

/* ── Form builder: a question block, and the deadline countdown ─────────── */
#mbody .fg{max-height:none}
.fq-left{font-family:var(--mono);font-size:11.5px;color:var(--mu)}