/* Cross-device interaction and accessibility polish. */
.ui-icon{
  width:1.1em;height:1.1em;flex:0 0 auto;stroke-width:2;
  vertical-align:-.18em;pointer-events:none;
}
.nav-btn>.ui-icon,.nav-menu a>.ui-icon,.tile .ui-icon{margin-right:7px}
.wr-title h1>.ui-icon,.dcard-title>.ui-icon,.k-label>.ui-icon{margin-right:7px}
.tile .ico .ui-icon{width:22px;height:22px;margin:0}

#mainNav .nav-btn,#mainNav .nav-menu>.nav-item>a{position:relative}
#mainNav .nav-btn.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;
  border-radius:999px;background:var(--accent,#60a5fa);box-shadow:0 0 10px rgba(96,165,250,.55);
}
#mainNav .dropdown a.active{box-shadow:inset 3px 0 0 var(--accent,#60a5fa)}

.ui-toast-region{
  position:fixed;right:18px;bottom:18px;z-index:120000;width:min(380px,calc(100vw - 24px));
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.ui-toast{
  display:grid;grid-template-columns:22px minmax(0,1fr) 28px;align-items:center;gap:10px;
  padding:11px 10px 11px 13px;border:1px solid rgba(148,163,184,.28);border-radius:14px;
  color:var(--text,#f8fafc);background:rgba(15,23,42,.96);box-shadow:0 18px 46px rgba(2,6,23,.42);
  backdrop-filter:blur(16px);pointer-events:auto;animation:uiToastIn .22s cubic-bezier(.2,.8,.2,1) both;
}
.ui-toast.success{border-left:4px solid #22c55e}.ui-toast.error{border-left:4px solid #ef4444}
.ui-toast.warning{border-left:4px solid #f59e0b}.ui-toast.info{border-left:4px solid #3b82f6}
.ui-toast-message{font-weight:760;line-height:1.35;overflow-wrap:anywhere}
.ui-toast-close{width:28px!important;height:28px!important;min-height:28px!important;padding:0!important;border:0;background:transparent;color:inherit}
.ui-toast.leaving{animation:uiToastOut .18s ease both}
@keyframes uiToastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes uiToastOut{to{opacity:0;transform:translateY(5px) scale(.98)}}

.ui-save-state{
  display:inline-flex;align-items:center;gap:6px;width:max-content;margin-top:5px;padding:4px 8px;
  border:1px solid rgba(148,163,184,.2);border-radius:999px;color:var(--muted-2);
  background:rgba(255,255,255,.035);font-size:.76rem;font-weight:800;
}
.ui-save-state[hidden]{display:none!important}
.ui-save-state::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e}
.ui-save-state.dirty{color:#fde68a;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.09)}
.ui-save-state.dirty::before{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.45)}
.ui-save-state.new{color:#bfdbfe;border-color:rgba(96,165,250,.3);background:rgba(59,130,246,.08)}
.ui-save-state.new::before{background:#60a5fa}

.ui-report-jump{
  position:sticky;top:8px;z-index:22;display:none;align-items:center;gap:8px;margin:0 0 10px;
  padding:7px 9px;border:1px solid rgba(148,163,184,.22);border-radius:14px;
  background:rgba(15,23,42,.92);box-shadow:0 8px 24px rgba(2,6,23,.2);backdrop-filter:blur(14px);
}
.ui-report-jump .ui-icon{width:18px;height:18px;color:var(--accent,#60a5fa)}
.ui-report-jump select{
  width:100%;min-height:38px;border:0;background:transparent;color:var(--text);font:inherit;font-weight:800;
}

.wr-card,.dcard,.kpi,.repWeekBlock{content-visibility:auto;contain-intrinsic-size:auto 260px}
input,select,textarea,button{scroll-margin-top:110px}

@media (min-width:761px) and (max-width:1100px){
  .wr-grid3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wr-card{padding:16px!important}
  .wr-row{gap:12px}
  :is(button,.btn,.nav-btn,.wr-btn,input,select,textarea){min-height:44px}
}

@media (max-width:850px){
  #navMenu .nav-btn.active::after{left:8px;right:auto;top:10px;bottom:10px;width:3px;height:auto}
  #navMenu :is(button,a){min-height:46px}
}

@media (max-width:760px){
  .ui-toast-region{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));width:auto}
  .ui-report-jump{display:flex}
  .wr-page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    min-height:46px;font-size:16px!important;
  }
  .wr-page textarea{min-height:96px}
  .wr-page :is(input,select,textarea):focus{box-shadow:0 0 0 3px rgba(59,130,246,.18)}
  .wr-card{content-visibility:auto;contain-intrinsic-size:auto 360px}
}

body[data-theme="light"] .ui-toast,
body[data-theme="light"] .ui-report-jump{background:rgba(255,255,255,.96);color:#0f172a}

@media (prefers-reduced-motion:reduce){.ui-toast{animation-duration:.01ms!important}}