/* Clean Smart Pro — Enterprise Dashboard Premium UI, 27 Oct 2026
   Scoped presentation only. Never changes permissions, calculations or API calls. */
#app.csp-dashboard-premium > main{
  --csp-navy:#071c42;--csp-blue:#0b4c93;--csp-sky:#2bb7e9;--csp-muted:#60748f;
  --csp-line:#d9e6f3;--csp-ink:#142b4e;
  min-width:0;
  background:radial-gradient(circle at 98% 5%,rgba(167,212,254,.31),transparent 34%),
    linear-gradient(180deg,#f1f6fd 0%,#f6f9fd 45%,#f8fafc 100%);
  color:var(--csp-ink);
}
#app.csp-dashboard-premium > main > header{
  position:relative!important;top:auto!important;z-index:2!important;
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  gap:18px!important;min-width:0!important;overflow:hidden!important;
  padding:26px clamp(17px,3vw,38px)!important;
  margin:0 0 18px!important;border:1px solid rgba(141,192,244,.46)!important;
  border-radius:25px!important;
  background:radial-gradient(ellipse at 95% 4%,rgba(4,193,211,.29),transparent 35%),
    linear-gradient(115deg,#061a3b 3%,#0b3773 57%,#075e8a 110%)!important;
  box-shadow:0 20px 42px rgba(15,51,102,.17)!important;
}
#app.csp-dashboard-premium > main > header::before{
  content:"";position:absolute;right:-62px;top:-124px;width:390px;height:390px;
  border-radius:50%;opacity:.36;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 45px,rgba(97,234,254,.58) 46px 47px);
}
#app.csp-dashboard-premium > main > header::after{
  content:"";position:absolute;right:13%;bottom:-92px;width:260px;height:180px;
  transform:rotate(-19deg);border-radius:60%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(69,181,238,.17),transparent 70%);
}
#app.csp-dashboard-premium .page-heading{
  position:relative;z-index:1;min-width:0;flex:1 1 270px;
}
#app.csp-dashboard-premium .csp-dashboard-eyebrow{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-bottom:9px;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:900;color:#89e9e5;
}
#app.csp-dashboard-premium .csp-dashboard-eyebrow::before{
  content:"";width:8px;height:8px;flex-shrink:0;border-radius:50%;
  background:#34e5b9;box-shadow:0 0 0 5px rgba(52,229,185,.15);
}
#app.csp-dashboard-premium .page-heading h1{
  color:#fff!important;font-size:clamp(23px,2.6vw,37px)!important;
  font-weight:900!important;letter-spacing:-.035em!important;
  line-height:1.19!important;margin:0 0 9px!important;
  overflow-wrap:anywhere!important;text-shadow:0 1px 1px rgba(0,0,0,.13);
}
#app.csp-dashboard-premium .page-heading p{margin:0!important;line-height:1.45}
#app.csp-dashboard-premium .page-heading p b{font-size:13px;color:#c4dafa;font-weight:600}
#app.csp-dashboard-premium .csp-dashboard-date{
  display:block;margin:9px 0 0;color:#d7ebff;font-size:12px;font-weight:650;
}
#app.csp-dashboard-premium > main > header .header-actions{
  position:relative;z-index:2;display:flex!important;justify-content:flex-end!important;
  gap:7px!important;align-items:center!important;flex:1 1 430px;max-width:800px;
  min-width:0;flex-wrap:wrap!important;
}
#app.csp-dashboard-premium > main > header .header-actions > button,
#app.csp-dashboard-premium > main > header .header-actions > select{
  min-height:38px!important;max-width:100%;width:auto!important;flex:0 1 auto!important;
  border:1px solid rgba(182,216,252,.43)!important;border-radius:11px!important;
  padding:8px 11px!important;font-size:12px!important;font-weight:750!important;
  color:#fff!important;background:rgba(255,255,255,.11)!important;
  box-shadow:none!important;backdrop-filter:blur(7px);
  white-space:normal!important;line-height:1.2!important;
}
#app.csp-dashboard-premium > main > header .header-actions > select{
  color:#12355d!important;background:#fff!important;
}
#app.csp-dashboard-premium > main > header .header-actions > button:hover{
  background:rgba(255,255,255,.22)!important;transform:none!important;
}
#app.csp-dashboard-premium > main > header .header-actions > button:focus-visible,
#app.csp-dashboard-premium .dashboard-stat-card:focus-visible,
#app.csp-dashboard-premium .csp-dash-shortcut:focus-visible{
  outline:3px solid #65e3ff!important;outline-offset:3px!important;
}
#app.csp-dashboard-premium .csp-dash-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:4px 2px 14px;
}
#app.csp-dashboard-premium .csp-dash-heading{min-width:0}
#app.csp-dashboard-premium .csp-dash-heading strong{
  display:block;font-size:clamp(16px,2.1vw,22px);
  font-weight:900;letter-spacing:-.022em;color:#122d52;
}
#app.csp-dashboard-premium .csp-dash-heading small{
  display:block;font-size:12px;color:#66809a;line-height:1.5;margin-top:3px;
}
#app.csp-dashboard-premium .csp-dash-shortcuts{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
#app.csp-dashboard-premium .csp-dash-shortcut{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:39px!important;padding:9px 13px!important;
  border:1px solid #c9ddf0!important;border-radius:12px!important;
  background:#fff!important;color:#164d84!important;
  box-shadow:0 3px 12px rgba(24,78,130,.06)!important;
  font-size:12px!important;font-weight:800!important;line-height:1.15!important;
}
#app.csp-dashboard-premium .csp-dash-shortcut.primary{
  background:linear-gradient(135deg,#126cc0,#11509a)!important;
  border-color:#166ab5!important;color:white!important;
}
#app.csp-dashboard-premium .csp-dashboard-metrics{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;min-width:0;margin:0 0 18px!important;
}
#app.csp-dashboard-premium .dashboard-stat-card{
  display:flex!important;align-items:flex-start!important;gap:11px!important;
  position:relative!important;isolation:isolate;
  min-width:0!important;min-height:124px!important;padding:18px 15px!important;
  border-radius:19px!important;background:#fff!important;
  border:1px solid #dce8f5!important;
  box-shadow:0 8px 25px rgba(22,56,104,.058)!important;
  color:#132e51!important;text-align:left!important;
  overflow:hidden!important;transform:none!important;
}
#app.csp-dashboard-premium .dashboard-stat-card::after{
  content:"";position:absolute;z-index:-1;right:-36px;top:-33px;
  width:98px;height:98px;border-radius:50%;background:rgba(36,134,230,.045);
}
#app.csp-dashboard-premium .dashboard-stat-card:hover{
  border-color:#91c5f1!important;box-shadow:0 12px 28px rgba(23,92,170,.13)!important;
}
#app.csp-dashboard-premium .dashboard-stat-card > span{
  display:grid!important;place-items:center!important;
  flex:0 0 40px!important;width:40px;height:40px;border-radius:12px!important;
  background:#e9f3ff!important;font-size:21px!important;line-height:1!important;
}
#app.csp-dashboard-premium .dashboard-stat-card > div{min-width:0}
#app.csp-dashboard-premium .dashboard-stat-card b{
  color:#143962!important;font-size:clamp(23px,2.3vw,32px)!important;
  font-weight:950!important;letter-spacing:-.045em!important;
  line-height:1.15!important;margin:0 0 7px!important;font-variant-numeric:tabular-nums!important;
}
#app.csp-dashboard-premium .dashboard-stat-card small{
  color:#607993!important;font-weight:750!important;font-size:11px!important;line-height:1.35!important;
  overflow-wrap:anywhere!important;letter-spacing:0!important;
}
#app.csp-dashboard-premium .csp-kpi-work > span{background:#fff5e6!important}
#app.csp-dashboard-premium .csp-kpi-over > span,
#app.csp-dashboard-premium .csp-kpi-re > span{background:#fff0f0!important}
#app.csp-dashboard-premium .csp-kpi-ok > span{background:#e8f9f0!important}
#app.csp-dashboard-premium .csp-dashboard-operations{margin-top:4px}
#app.csp-dashboard-premium .csp-dash-ops-grid{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:14px;align-items:start;min-width:0;
}
#app.csp-dashboard-premium .csp-dash-ops-grid.single{grid-template-columns:minmax(0,1fr)}
#app.csp-dashboard-premium .csp-dash-ops-left,#app.csp-dashboard-premium .csp-dash-ops-right{
  display:grid;gap:13px;min-width:0;
}
#app.csp-dashboard-premium .csp-dash-ops-grid .panel,
#app.csp-dashboard-premium .csp-dash-ops-grid .attendance-self,
#app.csp-dashboard-premium .csp-dash-ops-grid .attendance-summary button{
  min-width:0;margin:0!important;border:1px solid #d8e7f6!important;
  border-radius:19px!important;background:#fff!important;
  box-shadow:0 8px 25px rgba(21,65,115,.055)!important;
}
#app.csp-dashboard-premium .csp-dash-ops-grid .panel{padding:18px!important}
#app.csp-dashboard-premium .csp-dash-ops-grid .attendance-self{
  padding:16px!important;min-height:90px;flex-wrap:wrap;gap:12px!important;
}
#app.csp-dashboard-premium .csp-dash-ops-grid .attendance-self.checked{
  background:linear-gradient(135deg,#e9fcf1,#fff)!important;border-color:#99e6bb!important;
}
#app.csp-dashboard-premium .csp-dash-ops-grid .attendance-summary{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;margin:0!important;
}
#app.csp-dashboard-premium .csp-dash-ops-grid .attendance-summary button{
  min-height:88px!important;display:flex!important;text-align:left!important;
  align-items:center!important;gap:13px!important;padding:13px!important;
}
#app.csp-dashboard-premium .csp-dash-ops-grid .attendance-summary strong{
  color:#1268b3!important;font-size:26px!important;font-variant-numeric:tabular-nums;
}
#app.csp-dashboard-premium .csp-dash-ops-grid .live-online-panel{
  background:linear-gradient(140deg,#eefdf5 0%,#fff 65%)!important;
  border-color:#aee9c8!important;
}
#app.csp-dashboard-premium .live-online-title{font-weight:950!important;font-size:19px!important;color:#08603d!important}
#app.csp-dashboard-premium .live-online-total{
  min-width:67px;border-radius:16px!important;padding:11px 13px!important;
  background:linear-gradient(145deg,#087e56,#005e41)!important;
}
#app.csp-dashboard-premium .live-online-total b{font-size:28px!important}
#app.csp-dashboard-premium .live-online-counts{gap:7px!important}
#app.csp-dashboard-premium .live-online-counts > span{
  padding:7px 10px!important;font-size:11px!important;background:#fff!important;
  color:#284e61!important;border:1px solid #cbe6df!important;
}
#app.csp-dashboard-premium .live-online-grid{padding:13px 2px 4px!important;gap:12px!important}
#app.csp-dashboard-premium .live-online-avatar{border-radius:50%!important;overflow:visible!important}
#app.csp-dashboard-premium .live-online-avatar .csp-avatar-circle{
  border-radius:50%!important;overflow:hidden!important;object-fit:cover!important;
}
#app.csp-dashboard-premium .storage-live-panel{background:linear-gradient(150deg,#f9fcff,#fff)!important}
#app.csp-dashboard-premium .storage-live-panel h2{font-size:16px!important;color:#183b66!important}
#app.csp-dashboard-premium .storage-numbers{gap:9px!important}
#app.csp-dashboard-premium .storage-number{min-width:0}
#app.csp-dashboard-premium .storage-number b{font-variant-numeric:tabular-nums}
#app.csp-dashboard-premium .einteilung-today,
#app.csp-dashboard-premium .mop-task-panel,
#app.csp-dashboard-premium .future-task-section,
#app.csp-dashboard-premium .mop-my-assignment{
  border-radius:20px!important;box-shadow:0 7px 23px rgba(22,56,104,.055)!important;
}
#app.csp-dashboard-premium .dashboard-user-badge{
  border-radius:999px!important;border:1px solid #d6e5f5!important;
  padding:9px 14px!important;max-width:100%!important;
  box-shadow:0 4px 15px rgba(22,56,104,.055)!important;
}
#app.csp-dashboard-premium .csp-dash-ops-grid button:focus-visible{
  outline:3px solid #2b85d0!important;outline-offset:3px!important;
}
@media(max-width:1180px){
 #app.csp-dashboard-premium .csp-dashboard-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 #app.csp-dashboard-premium > main > header{flex-wrap:wrap!important}
 #app.csp-dashboard-premium > main > header .header-actions{justify-content:flex-start!important;max-width:100%}
}
@media(max-width:800px){
 #app.csp-dashboard-premium > main{padding:12px 12px 100px!important}
 #app.csp-dashboard-premium > main > header{
   position:relative!important;top:auto!important;display:block!important;
   padding:19px 15px!important;margin-bottom:14px!important;border-radius:22px!important;
 }
 #app.csp-dashboard-premium > main > header::before{
   width:260px;height:260px;right:-72px;top:-75px;opacity:.25;
 }
 #app.csp-dashboard-premium .page-heading{max-width:100%!important}
 #app.csp-dashboard-premium .page-heading h1{font-size:clamp(23px,5.3vw,31px)!important}
 #app.csp-dashboard-premium .csp-dashboard-date{font-size:11px!important}
 #app.csp-dashboard-premium > main > header .header-actions{
   margin-top:16px!important;display:grid!important;
   grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
   max-width:100%!important;width:100%!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > button,
 #app.csp-dashboard-premium > main > header .header-actions > select{
   width:100%!important;min-width:0!important;min-height:40px!important;
   padding:8px 7px!important;font-size:11px!important;
   overflow-wrap:anywhere!important;
 }
 #app.csp-dashboard-premium .csp-dash-toolbar{padding:2px 1px 11px;gap:10px}
 #app.csp-dashboard-premium .csp-dash-shortcuts{width:100%}
 #app.csp-dashboard-premium .csp-dash-shortcut{flex:1 1 135px;min-width:0!important}
 #app.csp-dashboard-premium .csp-dashboard-metrics{
   grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
 }
 #app.csp-dashboard-premium .dashboard-stat-card{
   min-height:112px!important;padding:14px 12px!important;
   gap:9px!important;border-radius:17px!important;
 }
 #app.csp-dashboard-premium .dashboard-stat-card > span{
   flex:0 0 34px!important;width:34px;height:34px;font-size:19px!important;
 }
 #app.csp-dashboard-premium .dashboard-stat-card b{font-size:25px!important}
 #app.csp-dashboard-premium .csp-dash-ops-grid{grid-template-columns:minmax(0,1fr)!important}
 #app.csp-dashboard-premium .csp-dash-ops-grid .panel{padding:15px!important}
 #app.csp-dashboard-premium .csp-dash-ops-grid .attendance-self{padding:13px!important}
 #app.csp-dashboard-premium .live-online-grid{gap:9px!important}
}
@media(max-width:370px){
 #app.csp-dashboard-premium > main{padding:9px 9px 95px!important}
 #app.csp-dashboard-premium > main > header{padding:16px 12px!important}
 #app.csp-dashboard-premium .dashboard-stat-card{padding:12px 9px!important;gap:6px!important}
 #app.csp-dashboard-premium .dashboard-stat-card > span{flex:0 0 28px!important;width:28px;height:28px;font-size:15px!important}
 #app.csp-dashboard-premium .dashboard-stat-card b{font-size:22px!important}
 #app.csp-dashboard-premium .dashboard-stat-card small{font-size:10px!important}
}
html[dir="rtl"] #app.csp-dashboard-premium .dashboard-stat-card{text-align:right!important}
html[dir="rtl"] #app.csp-dashboard-premium .csp-dash-ops-grid .attendance-summary button{text-align:right!important}
@media(prefers-reduced-motion:reduce){
 #app.csp-dashboard-premium *{transition:none!important;animation:none!important}
}
@media print{
 #app.csp-dashboard-premium > main{background:#fff!important}
 #app.csp-dashboard-premium > main > header{background:#fff!important;color:#111!important;box-shadow:none!important}
 #app.csp-dashboard-premium > main > header .page-heading h1{color:#111!important}
}

/* 2026-10-28 — balanced dashboard controls after removing the duplicated
   UHR employee assignment shortcut. Only the header layout changes. */
@media(max-width:800px){
 #app.csp-dashboard-premium > main > header .header-actions{
   align-items:stretch!important;
   grid-auto-flow:row!important;
   grid-auto-rows:minmax(50px,auto)!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > *{
   box-sizing:border-box!important;
   min-width:0!important;
   max-width:100%!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > .internet-status{
   width:100%!important;
   min-height:50px!important;
   display:flex!important;
   justify-content:center!important;
   padding:8px!important;
   white-space:normal!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions .internet-live-copy{
   min-width:0!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions .internet-live-copy small{
   white-space:normal!important;
   overflow-wrap:anywhere!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > button,
 #app.csp-dashboard-premium > main > header .header-actions > select{
   min-height:50px!important;
   display:flex;
   align-items:center;
   justify-content:center;
   text-align:center!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > .bell{
   display:flex!important;
   gap:8px!important;
   align-items:center!important;
   justify-content:center!important;
   white-space:normal!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > :last-child:nth-child(odd){
   grid-column:1 / -1!important;
 }
}