/* ======================================================================
   TALENT SYNERGY HR SUITE — MATERIAL ADMIN SYSTEM

   Adapted from the supplied HR Dashboard Design Sample.  The measured
   structure is retained (floating sidenav, 195deg gradients, hairline cards,
   overhanging stat tiles and spring motion), while the accent remains Talent
   Synergy green/navy and all existing application markup stays functional.
   ====================================================================== */

:root{
  --md-canvas:#151917;--md-surface:#1d221f;--md-surface-2:#232a26;
  --md-border:rgba(255,255,255,.12);--md-border-soft:rgba(255,255,255,.075);
  --md-ink:#fff;--md-body:rgba(255,255,255,.80);--md-muted:rgba(255,255,255,.62);
  --md-brand:#00c982;--md-brand-deep:#087452;--md-navy:#141438;
  --md-on-accent:#fff;--md-danger-dot:#e45449;
  --md-gradient-brand:linear-gradient(195deg,#19cf91,#087d5a);
  --md-gradient-navy:linear-gradient(195deg,#373754,#141438);
  --md-gradient-success:linear-gradient(195deg,#62bb78,#32975c);
  --md-gradient-warning:linear-gradient(195deg,#ffad42,#e57a16);
  --md-gradient-danger:linear-gradient(195deg,#ef665d,#c9362b);
  --md-shadow-xs:0 1px 2px rgba(0,0,0,.26);
  --md-shadow-lg:0 16px 40px -15px rgba(0,0,0,.58);
  --md-shadow-brand:0 7px 10px -5px rgba(0,201,130,.48);
  --md-spring:cubic-bezier(.34,1.61,.7,1.3);
  --md-side:250px;

  /* Existing components read these names.  Keeping them in step makes this a
     complete system rather than a special skin for the landing page. */
  --page-a:var(--md-canvas);--page-b:var(--md-canvas);--page-c:var(--md-canvas);
  --glow-a:transparent;--glow-b:transparent;--glow-c:transparent;
  --card:var(--md-surface);--card-2:var(--md-surface);--modal:var(--md-surface);
  --fill-1:var(--md-surface);--fill-2:var(--md-surface-2);--fill-3:rgba(255,255,255,.035);
  --bar:rgba(21,25,23,.82);--select-bg:var(--md-surface);
  --line:var(--md-border);--line-soft:var(--md-border-soft);
  --line-hover:rgba(0,201,130,.48);--line-focus:rgba(0,201,130,.68);
  --heading:var(--md-ink);--ink:var(--md-ink);--body:var(--md-body);
  --soft:var(--md-body);--muted:var(--md-muted);--dim:rgba(255,255,255,.48);
  --green:var(--md-brand);--green-ink:#39e0a5;--deep:var(--md-brand-deep);
  --tint:rgba(0,201,130,.15);--tint-soft:rgba(0,201,130,.075);
  --tint-line:rgba(0,201,130,.30);--hover:rgba(0,201,130,.13);
  --hover-soft:rgba(0,201,130,.065);
  --shadow:var(--md-shadow-xs);--shadow-lg:var(--md-shadow-lg);
  --btn-glow:var(--md-shadow-brand);
  --r:8px;--r-sm:8px;--r-lg:12px;--spring:var(--md-spring);
}

[data-theme="light"]{
  --md-canvas:#f4f6f5;--md-surface:#fff;--md-surface-2:#f1f3f2;
  --md-border:#e1e5e3;--md-border-soft:#edf0ee;
  --md-ink:#171d1a;--md-body:#4d5b55;--md-muted:#68766f;
  --md-shadow-xs:0 1px 2px rgba(18,31,25,.075);
  --md-shadow-lg:0 18px 45px -18px rgba(23,42,33,.25);
  --page-a:var(--md-canvas);--page-b:var(--md-canvas);--page-c:var(--md-canvas);
  --card:var(--md-surface);--card-2:var(--md-surface);--modal:var(--md-surface);
  --fill-1:#fff;--fill-2:var(--md-surface-2);--fill-3:#f8faf9;
  --bar:rgba(244,246,245,.82);--select-bg:#fff;
  --line:var(--md-border);--line-soft:var(--md-border-soft);
  --heading:var(--md-ink);--ink:var(--md-ink);--body:var(--md-body);
  --soft:#53625b;--muted:var(--md-muted);--dim:#7d8983;
  --green:#0a9168;--green-ink:#06684c;--deep:#075b43;
  --tint:rgba(10,145,104,.11);--tint-soft:rgba(10,145,104,.055);
  --tint-line:rgba(10,145,104,.27);--hover:rgba(10,145,104,.10);
  --hover-soft:rgba(10,145,104,.052);
  --shadow:var(--md-shadow-xs);--shadow-lg:var(--md-shadow-lg);
}

@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --md-canvas:#f4f6f5;--md-surface:#fff;--md-surface-2:#f1f3f2;
    --md-border:#e1e5e3;--md-border-soft:#edf0ee;
    --md-ink:#171d1a;--md-body:#4d5b55;--md-muted:#68766f;
    --md-shadow-xs:0 1px 2px rgba(18,31,25,.075);
    --md-shadow-lg:0 18px 45px -18px rgba(23,42,33,.25);
    --page-a:var(--md-canvas);--page-b:var(--md-canvas);--page-c:var(--md-canvas);
    --card:var(--md-surface);--card-2:var(--md-surface);--modal:var(--md-surface);
    --fill-1:#fff;--fill-2:var(--md-surface-2);--fill-3:#f8faf9;
    --bar:rgba(244,246,245,.82);--select-bg:#fff;
    --line:var(--md-border);--line-soft:var(--md-border-soft);
    --heading:var(--md-ink);--ink:var(--md-ink);--body:var(--md-body);
    --soft:#53625b;--muted:var(--md-muted);--dim:#7d8983;
    --green:#0a9168;--green-ink:#06684c;--deep:#075b43;
    --tint:rgba(10,145,104,.11);--tint-soft:rgba(10,145,104,.055);
    --tint-line:rgba(10,145,104,.27);--hover:rgba(10,145,104,.10);
    --hover-soft:rgba(10,145,104,.052);
    --shadow:var(--md-shadow-xs);--shadow-lg:var(--md-shadow-lg);
  }
}

html,body,button,input,select,textarea{font-family:Inter,"Segoe UI",Arial,sans-serif}
body:not(.auth-mode){background:var(--md-canvas)!important;background-attachment:scroll;color:var(--md-ink)}

/* ── application shell ─────────────────────────────────────────────── */
.suite-shell{min-height:100vh;width:100%}
.suite-sidenav{position:fixed;z-index:80;left:16px;top:16px;bottom:16px;width:var(--md-side);
  display:flex;flex-direction:column;padding:12px;background:var(--md-surface);
  border:.8px solid var(--md-border);border-radius:8px;box-shadow:var(--md-shadow-xs);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.suite-main{min-height:100vh;margin-left:calc(var(--md-side) + 32px);min-width:0}
.suite-side-brand{min-height:48px;padding:10px 9px;gap:10px}
.suite-side-brand .wordmark{font-size:13px;border-left-color:var(--md-border);padding-left:10px}
.suite-side-divider{height:1px;flex:0 0 auto;margin:4px 3px;background:var(--md-border-soft)}
.suite-user-card,.suite-mobile-sheet-head{display:flex;align-items:center;gap:11px;min-width:0;
  padding:12px 9px;color:var(--md-ink)}
.suite-user-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:grid;
  place-items:center;background-image:var(--md-gradient-brand);color:var(--md-on-accent);
  font:700 11px/1 inherit;letter-spacing:.04em;box-shadow:var(--md-shadow-brand)}
.suite-user-card>span:last-child,.suite-mobile-sheet-head>span:last-child{min-width:0}
.suite-user-card strong,.suite-mobile-sheet-head strong{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.25}
.suite-user-card small,.suite-mobile-sheet-head small{display:block;margin-top:3px;color:var(--md-muted);
  text-transform:capitalize;font-size:11px}
.suite-side-footer{flex:0 0 auto;margin-top:auto;padding:16px 10px 7px;border-top:1px solid var(--md-border-soft)}
.suite-side-footer span,.suite-side-footer small{display:block}
.suite-side-footer span{color:var(--md-muted);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.suite-side-footer small{margin-top:5px;color:var(--dim);font-size:11px}

/* Sidenav reuses the application's accessible nav contracts. */
.suite-sidenav .nav{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;
  align-items:stretch;gap:4px;padding:10px 0 14px;overflow:visible}
.suite-sidenav .navgroup{position:relative;width:100%}
.suite-sidenav .navitem{width:100%;min-height:40px;padding:9px 10px;border-radius:8px;
  justify-content:flex-start;gap:11px;color:var(--md-muted);font:500 12.5px/1.25 inherit;
  transition:background .18s ease,color .18s ease,transform .2s var(--md-spring)}
.suite-sidenav .navitem:hover{color:var(--md-ink);background:var(--md-surface-2);transform:translateY(-1px)}
.suite-sidenav .navitem.on:not(.suite-nav-direct){color:var(--md-ink);background:var(--md-surface-2)}
.suite-sidenav .suite-nav-direct.on{color:var(--md-on-accent);background-image:var(--md-gradient-brand);
  box-shadow:var(--md-shadow-brand)}
.suite-sidenav .navitem>span:not(.caret){min-width:0;overflow:hidden;text-overflow:ellipsis}
.suite-nav-icon{width:19px;height:19px;flex:0 0 19px;display:block}
.suite-sidenav .navitem .caret{margin-left:auto;font-size:15px;transition:transform .24s var(--md-spring)}
.suite-sidenav .navgroup.open>.navitem .caret{transform:rotate(180deg)}
.suite-sidenav .navmenu{position:static;display:none;min-width:0;padding:4px 0 5px 10px;
  background:transparent;border:0;border-radius:0;box-shadow:none;animation:none}
.suite-sidenav .navgroup.open>.navmenu{display:block}
.suite-sidenav .navmenu a{display:flex;align-items:center;gap:10px;min-height:36px;margin:2px 0;
  padding:7px 9px;border-radius:8px;color:var(--md-muted);font-size:11.7px;line-height:1.25}
.suite-sidenav .navmenu a:hover{background:var(--md-surface-2);color:var(--md-ink);transform:translateY(-1px)}
.suite-sidenav .navmenu a.on{color:var(--md-on-accent);background-image:var(--md-gradient-navy);
  box-shadow:0 7px 10px -5px rgba(20,20,56,.46)}
.suite-nav-mark{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;
  border-radius:6px;border:1px solid var(--md-border);font:700 9px/1 inherit}
.suite-sidenav .navmenu a.on .suite-nav-mark{border-color:rgba(255,255,255,.3)}

/* Frosted top navbar and route trail. */
.suite-main>.top{position:sticky;top:0;z-index:60;min-height:75px;margin:0;padding:0 24px;
  display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--md-canvas) 82%,transparent);
  border:0;backdrop-filter:saturate(180%) blur(24px)}
.suite-mobile-brand{display:none}
.suite-route{display:flex;align-items:center;gap:8px;min-width:0;color:var(--md-muted);font-size:13px}
.suite-route span,.suite-route strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suite-route strong{color:var(--md-ink);font-weight:700}.suite-route i{opacity:.55;font-style:normal}
.suite-main>.top .who{color:var(--md-muted);font-size:11.5px}
.suite-main>.top .iconbtn{border:0;background:transparent;border-radius:50%;width:40px;height:40px}
.suite-main>.top .iconbtn:hover{background:var(--md-surface-2)}
.suite-main>.top .iconbtn .ico-sun svg,.suite-main>.top .iconbtn .ico-moon svg{display:block;width:17px;height:17px}
.suite-main>.top .burger{display:none}
.suite-main>.top #signout{min-height:36px;padding:8px 13px;border:.8px solid var(--md-border);
  border-radius:8px;background:var(--md-surface);color:var(--md-ink);font:700 11.5px/1 inherit;
  box-shadow:var(--md-shadow-xs);cursor:pointer;transition:.2s var(--md-spring)}
.suite-main>.top #signout:hover{transform:translateY(-1px);border-color:var(--line-hover)}

main#view{max-width:none;margin:0;padding:2px 24px 72px;animation:none}
main#view.view-enter{animation:md-fade-up .38s cubic-bezier(.16,1,.3,1) both}
@keyframes md-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── shared component restyle ──────────────────────────────────────── */
.pagehead{align-items:flex-start;margin-bottom:28px}
.pagehead h1,main#view>h1:first-child{font:700 clamp(23px,2.4vw,30px)/1.25 inherit;
  letter-spacing:-.025em;color:var(--md-ink)}
.pagehead .sub,main#view>p{margin-top:7px;color:var(--md-muted);font-size:14px;font-weight:400}
.pagehead .actions{align-self:center}
.sectionhead{margin:34px 0 16px}.sectionhead h2{font-size:16px;font-weight:700}
.sectionhead .rule{background:var(--md-border)}

.suite-main .card:not(.notice),.suite-main .tablewrap,.modal-bg>.modal{
  background:var(--md-surface);border:.8px solid var(--md-border);border-radius:8px;
  box-shadow:var(--md-shadow-xs)}
.suite-main .card:not(.notice){padding:17px 18px}
.suite-main .card:not(.notice)::before{display:none}
.suite-main .card.hover:hover,.suite-main .officecard:hover,.suite-main .teamcard:hover{
  transform:translateY(-4px);border-color:var(--line-hover);box-shadow:var(--md-shadow-lg)}
.suite-main .grid{gap:24px}.suite-main .grid>.card{animation-delay:calc(min(var(--i,0),12) * 55ms)}
.suite-main .card>h3{font-size:14px;font-weight:700;color:var(--md-ink)}

.suite-main .btn,.modal-bg .btn,.suite-main .btn.primary{min-height:40px;padding:10px 24px;
  border:0;border-radius:8px;background-image:var(--md-gradient-brand);color:var(--md-on-accent);
  font:700 12px/1.1 inherit;text-transform:none;box-shadow:var(--md-shadow-brand);
  transition:transform .2s var(--md-spring),filter .18s ease}
.suite-main .btn:hover,.modal-bg .btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-sm,.btn-2,.btn-danger{border-radius:8px;min-height:36px;font-size:11.5px;font-weight:700}
.btn-2{background:var(--md-surface-2);border:.8px solid var(--md-border);box-shadow:var(--md-shadow-xs)}

input,select,textarea{border:.8px solid var(--line);border-radius:8px;background:var(--fill-1);
  color:var(--ink);font-size:13px;min-height:42px}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--tint)}
label{font-size:11.5px;font-weight:600;color:var(--md-muted)}
.filterbar,.toolbar{gap:12px}

.tablewrap{border-radius:8px}.suite-main table{font-size:12.6px}
.suite-main thead th{padding:13px 14px;background:var(--md-surface);color:var(--md-muted);
  font-size:10.4px;font-weight:700;letter-spacing:.09em}
.suite-main td{padding:12px 14px}.suite-main tbody tr:hover{background:var(--hover-soft)}
.suite-main tr.clickable:hover td:first-child{box-shadow:inset 2px 0 0 var(--green)}

.tabs{padding:4px;border-radius:12px;background:var(--md-surface-2);border:0;gap:2px}
.tab{min-height:36px;border:0;border-radius:9px;background:transparent;color:var(--md-muted);
  font-size:11.5px;font-weight:600}
.tab.on{background:var(--md-surface);color:var(--md-ink);box-shadow:0 1px 5px 1px rgba(0,0,0,.12)}
.tag{border:0;border-radius:999px;padding:5px 10px;font-size:10px;text-transform:uppercase;
  letter-spacing:.045em}
.modal-bg{backdrop-filter:blur(7px)}
.modal-bg>.modal{border-radius:12px;box-shadow:var(--md-shadow-lg)}
.modal-x{border-radius:8px;box-shadow:var(--md-shadow-xs)}

.officegrid{gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.officecard{border:.8px solid var(--md-border);border-radius:8px;background:var(--md-surface);
  box-shadow:var(--md-shadow-xs);transition:.24s var(--md-spring)}
.officecard::after{display:none}.officecard .oc-top{padding:18px}.officecard .oc-body{padding:14px 18px 18px}
.officecard .oc-n{color:var(--green-ink)}.officecard .ocbar{height:5px;border-radius:999px}
.officecard .ocbar i{background-image:var(--md-gradient-brand);box-shadow:var(--md-shadow-brand)}
.omark.lgx{border-radius:8px}

/* ── canonical dashboard composition ───────────────────────────────── */
.dashboard-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:24px}
.suite-main .dashboard-chart-card{padding:0!important;min-height:350px;overflow:hidden}
.dashboard-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 20px 8px}
.dashboard-card-head h2{margin:0;color:var(--md-ink);font:700 16px/1.35 inherit}
.dashboard-card-head p{margin:4px 0 0;color:var(--md-muted);font-size:12.5px}
.dashboard-card-foot{margin-top:auto;padding:14px 20px;border-top:1px solid var(--md-border-soft);
  color:var(--md-muted);font-size:11.5px}

.dashboard-bars{height:245px;display:flex;align-items:flex-end;gap:clamp(8px,1.4vw,18px);padding:21px 18px 17px}
.dashboard-bar-item{height:100%;min-width:0;flex:1 1 0;display:grid;grid-template-rows:1fr auto auto;
  align-items:end;text-align:center;gap:5px}
.dashboard-bar-track{height:170px;min-width:14px;display:flex;align-items:flex-end;justify-content:center;
  border-bottom:1px solid var(--md-border);background:repeating-linear-gradient(to top,
    transparent 0,transparent 41px,var(--md-border-soft) 42px,var(--md-border-soft) 43px)}
.dashboard-bar-track i{display:block;width:min(30px,72%);min-height:8px;border-radius:4px 4px 1px 1px;
  background-image:var(--md-gradient-brand);box-shadow:var(--md-shadow-brand);animation:md-grow .65s ease both}
@keyframes md-grow{from{height:0}}
.dashboard-bar-item strong{font-size:11px;color:var(--md-ink)}
.dashboard-bar-item span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--md-muted);font-size:9.5px}

.movement-visual{min-height:245px;display:grid;grid-template-columns:140px 1fr;align-items:center;gap:22px;padding:16px 20px 23px}
.movement-ring{width:132px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;
  position:relative;background:conic-gradient(var(--md-brand) calc(var(--join) * 1%),var(--md-surface-2) 0)}
.movement-ring::after{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--md-surface)}
.movement-ring strong,.movement-ring span{position:relative;z-index:1}.movement-ring strong{font-size:27px;color:var(--md-ink)}
.movement-ring span{margin-top:2px;color:var(--md-muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.movement-list{display:flex;flex-direction:column;gap:14px}.movement-list>div{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:9px}
.movement-list i{width:8px;height:8px;border-radius:50%}.movement-list i.up{background:var(--md-brand)}
.movement-list i.down{background:var(--md-danger-dot)}.movement-list i.total{background:var(--md-navy)}
.movement-list span{font-size:12px;color:var(--md-muted)}.movement-list b{font-size:14px;color:var(--md-ink)}

.workload-list{min-height:245px;display:flex;flex-direction:column;justify-content:center;gap:19px;padding:19px 20px 24px}
.workload-list a{display:grid;grid-template-columns:1fr auto;gap:7px;color:var(--md-muted);font-size:12px;text-decoration:none}
.workload-list a:hover span{color:var(--green-ink)}.workload-list b{color:var(--md-ink);font-size:13px}
.workload-list a>div{grid-column:1/-1;height:6px;overflow:hidden;border-radius:999px;background:var(--md-surface-2)}
.workload-list a>div i{display:block;height:100%;border-radius:inherit;background-image:var(--md-gradient-brand);
  box-shadow:var(--md-shadow-brand);transition:width .6s ease}

.dashboard-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:28px;margin-bottom:24px}
.dashboard-kpis .kpi{min-height:128px;overflow:visible;padding:21px 18px 15px;border:.8px solid var(--md-border);
  border-radius:8px;background:var(--md-surface);box-shadow:var(--md-shadow-xs)}
.dashboard-kpis .kpi::after{display:none}.dashboard-kpis .kpi:hover{transform:translateY(-4px);box-shadow:var(--md-shadow-lg)}
.kpi-icon{position:absolute;right:16px;top:-27px;width:52px;height:52px;border-radius:8px;
  display:grid;place-items:center;color:var(--md-on-accent);background-image:var(--md-gradient-brand);box-shadow:var(--md-shadow-brand)}
.kpi-icon svg{width:22px;height:22px}.kpi-icon.tone-dark{background-image:var(--md-gradient-navy);box-shadow:0 7px 10px -5px rgba(20,20,56,.5)}
.kpi-icon.tone-success{background-image:var(--md-gradient-success);box-shadow:0 7px 10px -5px rgba(50,151,92,.5)}
.kpi-icon.tone-warning{background-image:var(--md-gradient-warning);box-shadow:0 7px 10px -5px rgba(229,122,22,.5)}
.kpi-icon.tone-danger{background-image:var(--md-gradient-danger);box-shadow:0 7px 10px -5px rgba(201,54,43,.5)}
.kpi-icon.tone-navy{background-image:var(--md-gradient-navy);box-shadow:0 7px 10px -5px rgba(20,20,56,.5)}
.dashboard-kpis .kpi-label{display:block;margin:0 68px 7px 0;color:var(--md-muted);font-size:12px;font-weight:400}
.dashboard-kpis .kpi b{font-size:27px;color:var(--md-ink)}
.dashboard-kpis .kpi-foot{position:absolute;left:18px;right:18px;bottom:14px;padding-top:10px;
  border-top:1px solid var(--md-border-soft);color:var(--md-muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-list-card{padding:0!important;overflow:hidden}.dashboard-list-card>h3{padding:18px 19px 12px;margin:0!important}
.dashboard-list-card>.scroll,.dashboard-list-card>.tablewrap{border:0;border-radius:0;box-shadow:none}

/* ── responsive drawer and content ─────────────────────────────────── */
@media (max-width:1199px){
  .dashboard-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-overview-grid>:last-child{grid-column:1/-1}
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:992px){
  .suite-sidenav{display:none}.suite-main{margin-left:0}
  .suite-main>.top{min-height:66px;padding:0 17px}.suite-main>.top .burger{display:inline-grid;
    place-items:center;width:40px;height:40px;padding:0;border-radius:50%;font-size:17px}
  .suite-mobile-brand{display:flex}.suite-mobile-brand .app-brand-logos{width:34px;flex-basis:34px;
    overflow:hidden;justify-content:start}.suite-mobile-brand .app-brand-logos img{width:126px;max-width:none;object-position:left center}
  main#view{padding:7px 17px 60px}
  .msheet{position:fixed;z-index:101;inset:12px auto 12px 12px;width:min(320px,calc(100vw - 36px));
    max-height:none;padding:12px;background:var(--md-surface);border:.8px solid var(--md-border);
    border-radius:10px;box-shadow:var(--md-shadow-lg);overflow-y:auto;animation:md-drawer .26s var(--md-spring) both}
  .msheet[hidden]{display:none}@keyframes md-drawer{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
  body.sheet-open{overflow:hidden}body.sheet-open::before{content:"";position:fixed;z-index:100;inset:0;background:rgba(8,15,12,.5);backdrop-filter:blur(2px)}
  .suite-mobile-sheet-head{padding:10px 9px 14px;border-bottom:1px solid var(--md-border-soft)}
  .msec{padding:10px 0}.msec-t{display:flex;align-items:center;gap:9px;margin:0 8px 6px;
    color:var(--md-muted);font-size:10px}.msec-t .suite-nav-icon{width:15px;height:15px}
  .msec a{min-height:40px;padding:10px 12px;border-radius:8px;color:var(--md-muted);font-size:12.5px}
  .msec a.on{color:var(--md-on-accent);background-image:var(--md-gradient-brand);box-shadow:var(--md-shadow-brand)}
}
@media (max-width:768px){
  .suite-route{display:none}.pagehead{margin-bottom:22px}.pagehead h1{font-size:23px}
  .dashboard-overview-grid,.dashboard-kpis{grid-template-columns:1fr}
  .dashboard-overview-grid>:last-child{grid-column:auto}
  .dashboard-kpis{gap:24px}.dashboard-bars{gap:8px}
  .movement-visual{grid-template-columns:120px 1fr}.movement-ring{width:116px}
  .suite-main .grid{gap:16px}.officegrid{gap:16px}
}
@media (max-width:560px){
  .suite-main>.top .who{display:none}.suite-main>.top{padding:0 12px}.suite-main>.top #signout{padding:8px 11px}
  main#view{padding:6px 12px 52px}.dashboard-card-head{padding:17px 16px 7px}
  .dashboard-bars{padding-left:13px;padding-right:13px}.dashboard-bar-item span{font-size:8.5px}
  .movement-visual{grid-template-columns:1fr;justify-items:center;gap:18px}.movement-list{width:100%}
  .workload-list{padding-left:16px;padding-right:16px}.dashboard-card-foot{padding-left:16px;padding-right:16px}
  .dashboard-kpis .kpi{min-height:126px}.pagehead .actions{width:100%}.pagehead .actions>*{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .suite-main *, .msheet{animation:none!important;transition-duration:.001ms!important}
}

@media print{
  .suite-sidenav,.suite-main>.top,.msheet{display:none!important}.suite-main{margin:0!important}
  main#view{padding:0!important}
}