/* LedExpert Workspace 5.0.2 Mobile UI correction.
   Visual-only: no task API, assignments, permissions, messages or WireGuard changes. */
html.ws5,html.ws5 body{
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html.ws5 body{overscroll-behavior-x:none}
html.ws5 .app,html.ws5 .main,html.ws5 .panel,
html.ws5 .card,html.ws5 .grid2,html.ws5 .grid3,
html.ws5 .table-wrap,html.ws5 .toolbar,
html.ws5 .section-head,html.ws5 .stats{
  min-width:0;max-width:100%;
}
html.ws5 .panel.active{min-width:0}
html.ws5 .main{overflow-x:clip}
html.ws5 .table-wrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
html.ws5 .toolbar :is(input,select,button){min-width:0}
html.ws5 .section-head>*{min-width:0}
html.ws5 .section-head h2{overflow-wrap:anywhere}

/* Task status ring: match Workspace dark theme, without white light-mode surfaces. */
html.ws5 #panel-tasks .task-readiness{
  display:flex;align-items:center;gap:18px;min-width:0;
  background:linear-gradient(135deg,#1d1b30,#181727)!important;
  border:1px solid #36304d!important;
  border-radius:18px;padding:18px;box-shadow:none;color:#e8e2fa;
}
html.ws5 #panel-tasks .task-readiness-chart{flex-shrink:0}
html.ws5 #panel-tasks .task-readiness-chart::after{
  background:#232039!important;box-shadow:inset 0 0 0 1px #493a68!important;
}
html.ws5 #panel-tasks .task-readiness-center b{color:#f7f3ff!important}
html.ws5 #panel-tasks .task-readiness-center span{color:#bfb7d2!important}
html.ws5 #panel-tasks .task-readiness-info{min-width:0;flex:1}
html.ws5 #panel-tasks .task-readiness-info>div{
  color:#e7e0f8!important;border-bottom-color:#353047!important;
  grid-template-columns:12px minmax(0,1fr) auto;
}
html.ws5 #panel-tasks .task-readiness-info>div span{min-width:0}
html.ws5 #panel-tasks .task-readiness-info>div b{color:#f8f3ff!important}

/* Task list cells and row coloring. */
html.ws5 #panel-tasks .table-wrap{min-width:0;max-width:100%;background:transparent}
html.ws5 #panel-tasks .table tbody tr.task-table-row,
html.ws5 #panel-tasks .table tbody tr{
  color:#f4effe;
  background:linear-gradient(145deg,#211d34,#191828)!important;
  border-color:#403454!important;
}
html.ws5 #panel-tasks .table tbody tr.task-table-row td,
html.ws5 #panel-tasks .table tbody tr td{
  color:#e4deee!important;background:transparent!important;border-bottom-color:#353044!important;
}
html.ws5 #panel-tasks .table tbody tr td:first-child{
  color:#fff!important;min-width:0;
}
html.ws5 #panel-tasks .table tbody tr td:first-child :is(b,strong){
  color:#f8f4ff!important;overflow-wrap:anywhere!important;white-space:normal!important;
}
html.ws5 #panel-tasks .table tbody tr td :is(.task-status,.priority,.task-assignee-cell){
  min-width:0;max-width:100%;overflow-wrap:anywhere;
}
html.ws5 #panel-tasks .task-colored{
  background:linear-gradient(130deg,color-mix(in srgb,var(--task-tone) 11%,#1d1b2d),#181827 90%)!important;
  border-color:#3b3450!important;border-left:4px solid var(--task-tone)!important;
  color:#f5f1ff!important;
}
html.ws5 #panel-tasks .task-progress-track{background:#39334e!important}
html.ws5 #panel-tasks .task-progress-line strong{color:var(--task-tone,#b2a0ff)!important}
html.ws5 #panel-tasks .task-status{
  color:#eee6fc!important;background:#352b48!important;
  padding:5px 9px;border-radius:999px;display:inline-flex;
}
/* Keep semantic colors for task status. */
html.ws5 #panel-tasks .task-status-done{color:#a5f1c7!important;background:#1d4037!important}
html.ws5 #panel-tasks .task-status-todo{color:#ffb3bf!important;background:#452934!important}
html.ws5 #panel-tasks .task-status-doing{color:#ffd78e!important;background:#443622!important}
html.ws5 #panel-tasks .task-status-rework{color:#d4b3ff!important;background:#3c2d55!important}

/* Overlay must occupy the visual viewport, regardless of page scroll offsets. */
html.ws5 .modal-backdrop{
  position:fixed!important;inset:0!important;
  width:100%!important;max-width:100vw!important;
  height:100dvh!important;min-width:0!important;
  margin:0!important;z-index:230!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior:contain;
  background:rgba(5,5,15,.8)!important;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
html.ws5 .modal{
  box-sizing:border-box!important;
  width:min(620px,100%)!important;max-width:100%!important;min-width:0!important;
  margin:0 auto!important;overflow-x:hidden!important;overflow-y:auto!important;
  background:#171525!important;color:#f2edfc!important;border-color:#39314e!important;
}
html.ws5 .modal :is(.form-grid,.field,.field.full,.task-member-picker,
 .task-member-option,.task-status-history,.modal-actions){
  min-width:0!important;max-width:100%!important;
}
html.ws5 .modal :is(input,textarea,select){
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
  color:#f7f3ff!important;background:#242135!important;border:1px solid #453b5a!important;
}
html.ws5 .modal :is(input,textarea,select):focus{
  outline:2px solid #8d72f6;outline-offset:0;border-color:#9276fa!important;
}
html.ws5 .modal .field label{overflow-wrap:anywhere}
html.ws5 .modal-actions{
  background:#171525!important;
  border-top:1px solid #353047;
  padding:12px 0 max(6px,env(safe-area-inset-bottom))!important;
}
html.ws5 .modal :is(.task-member-option,.task-history-entry){
  background:#252039!important;border-color:#39304f!important;
  color:#eee8fb!important;
}

/* Mobile-first. Fixed rows should not grow beyond the device width. */
@media(max-width:768px){
  html.ws5 .app{display:block!important;width:100%!important;max-width:100%!important}
  html.ws5 .main{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    padding:0 12px calc(88px + env(safe-area-inset-bottom))!important;
    overflow-x:clip!important;
  }
  html.ws5 .topbar{
    position:sticky!important;top:0!important;z-index:36!important;
    display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;
    align-items:center!important;gap:9px!important;
    width:calc(100% + 24px)!important;max-width:calc(100% + 24px)!important;
    margin:0 -12px 15px!important;
    padding:calc(9px + env(safe-area-inset-top)) 12px 10px!important;
    background:#121020f5!important;border-bottom:1px solid #332b49!important;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  }
  html.ws5 .topbar #mobileMenuBtn{
    display:grid!important;grid-column:1!important;grid-row:1!important;
    flex:none!important;width:44px!important;height:44px!important;margin:0!important;
  }
  html.ws5 .topbar .title,html.ws5 .topbar .ws5-search{display:none!important}
  html.ws5 .topbar .top-actions{
    display:grid!important;grid-column:2!important;grid-row:1!important;
    grid-template-columns:minmax(0,1fr) 44px!important;
    align-items:center!important;gap:8px!important;min-width:0!important;
    max-width:100%!important;width:100%!important;
  }
  html.ws5 .top-actions #quickTaskBtn{
    display:flex!important;align-items:center!important;justify-content:center!important;
    grid-column:1!important;grid-row:1!important;width:100%!important;min-width:0!important;
    height:44px!important;padding:9px 12px!important;
    font-size:14px!important;border-radius:13px!important;white-space:nowrap!important;
  }
  html.ws5 .top-actions #quickTaskBtn::before{display:none!important;content:none!important}
  html.ws5 .top-actions #workspaceBellBtn{
    display:grid!important;place-items:center!important;
    grid-column:2!important;grid-row:1!important;
    margin:0!important;width:44px!important;height:44px!important;
  }
  html.ws5 .top-actions #leCurrentClock,
  html.ws5 .top-actions #leItRequestButton,
  html.ws5 .top-actions #pushEnableBtn,
  html.ws5 .top-actions #refreshBtn,
  html.ws5 .top-actions #installPwaBtn{display:none!important}
  html.ws5 .mobile-bottom-nav{
    width:100%!important;max-width:100%!important;left:0!important;right:0!important;
    box-sizing:border-box!important;
  }
  html.ws5 #panel-tasks>.card{
    padding:13px!important;max-width:100%!important;min-width:0!important;
    overflow-x:hidden!important;
  }
  html.ws5 #panel-tasks .section-head{gap:8px!important;flex-wrap:wrap!important}
  html.ws5 #panel-tasks .section-head h2{font-size:19px!important;flex:1}
  html.ws5 #panel-tasks .section-head #newTaskBtn{
    padding:10px 12px!important;min-width:0!important;flex:0 1 auto!important;
    font-size:13px!important;white-space:normal;
  }
  html.ws5 #panel-tasks .task-readiness{
    display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;
    gap:12px!important;padding:13px!important;margin:0 0 17px!important;
    border-radius:15px!important;
  }
  html.ws5 #panel-tasks .task-readiness-chart{
    width:92px!important;height:92px!important;min-width:0!important;flex:none!important;
  }
  html.ws5 #panel-tasks .task-readiness-chart::after{
    width:63px!important;height:63px!important;
  }
  html.ws5 #panel-tasks .task-readiness-center b{font-size:18px!important}
  html.ws5 #panel-tasks .task-readiness-center span{font-size:10px!important}
  html.ws5 #panel-tasks .task-readiness-info{min-width:0!important;gap:5px!important}
  html.ws5 #panel-tasks .task-readiness-info>div{
    gap:5px!important;padding-bottom:5px!important;font-size:12px!important;
  }
  html.ws5 #panel-tasks .table-wrap{
    width:100%!important;max-width:100%!important;margin:0!important;
    padding:0!important;overflow-x:hidden!important;
  }
  html.ws5 #panel-tasks .table{
    table-layout:fixed!important;width:100%!important;min-width:0!important;
    max-width:100%!important;
  }
  html.ws5 #panel-tasks .table tbody{display:grid!important;gap:10px!important}
  html.ws5 #panel-tasks .table tbody tr{
    box-sizing:border-box!important;display:block!important;width:100%!important;
    min-width:0!important;max-width:100%!important;
    padding:11px 12px!important;border-radius:14px!important;
    overflow:hidden!important;box-shadow:0 6px 16px #05040e33!important;
  }
  html.ws5 #panel-tasks .table tbody td{
    box-sizing:border-box!important;display:grid!important;
    grid-template-columns:minmax(78px,32%) minmax(0,1fr)!important;
    gap:7px!important;width:100%!important;max-width:100%!important;min-width:0!important;
    padding:9px 0!important;white-space:normal!important;
    align-items:start!important;overflow-wrap:anywhere!important;text-align:left!important;
  }
  html.ws5 #panel-tasks .table tbody td:first-child{
    display:block!important;text-align:left!important;padding-bottom:12px!important;
  }
  html.ws5 #panel-tasks .table tbody td:first-child::before{display:none!important}
  html.ws5 #panel-tasks .table tbody td::before{
    flex:none!important;min-width:0!important;max-width:100%!important;
    font-size:10px!important;color:#aba1c1!important;
  }
  html.ws5 #panel-tasks .table tbody td :is(span,div,b,strong,button){
    max-width:100%!important;min-width:0!important;overflow-wrap:anywhere!important;
  }
  html.ws5 .modal-backdrop{
    display:flex!important;align-items:flex-end!important;justify-content:center!important;
    padding:0!important;left:0!important;right:0!important;
    width:100vw!important;max-width:100%!important;height:100dvh!important;
    overflow:hidden!important;
  }
  html.ws5 .modal-backdrop .modal{
    position:relative!important;flex:0 1 100%!important;
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - 8px)!important;
    height:auto!important;margin:0!important;
    padding:20px 16px calc(18px + env(safe-area-inset-bottom))!important;
    border-radius:20px 20px 0 0!important;border-bottom:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch;
  }
  html.ws5 .modal .form-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;
  }
  html.ws5 .modal .field.full{grid-column:1/-1!important}
  html.ws5 .modal :is(input,select,textarea){width:100%!important;font-size:16px!important}
  html.ws5 .modal-actions{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    position:sticky!important;bottom:0!important;
    gap:8px!important;z-index:5!important;
    margin-top:18px!important;
    box-shadow:0 -12px 22px #171525ee!important;
  }
  html.ws5 .modal-actions .btn{width:100%!important;max-width:100%!important;min-width:0!important}
  html.ws5 .modal-actions:has(> .btn:nth-child(3))>.btn:last-child{grid-column:1/-1!important}
  html.ws5 .modal .task-member-picker{overflow-x:hidden!important}
  html.ws5 .modal .task-member-option{
    display:flex!important;align-items:flex-start!important;gap:9px!important;
    padding:10px!important;overflow-wrap:anywhere!important;
  }
  html.ws5 .modal .task-member-option input[type="checkbox"]{
    width:18px!important;min-width:18px!important;flex:0 0 18px!important;margin-top:4px!important;
  }
  html.ws5 .ws5-welcome{max-width:100%!important;overflow:hidden!important}
  html.ws5 .ws5-welcome h2{overflow-wrap:anywhere!important;word-break:normal!important}
}
@media(max-width:360px){
  html.ws5 #panel-tasks .task-readiness{grid-template-columns:1fr!important}
  html.ws5 #panel-tasks .task-readiness-chart{margin:auto}
  html.ws5 #panel-tasks .table tbody td{grid-template-columns:minmax(69px,31%) minmax(0,1fr)!important}
}
@media(prefers-reduced-motion:reduce){
 html.ws5 .modal *,html.ws5 .topbar *,html.ws5 #panel-tasks *{transition:none!important}
}