/* CLOKIT USA — Approved desktop dashboard refinement, 2026-10-16.
   Dashboard-only presentation. No project, wallet, authentication or report logic.
   Full-screen board activates only after dashboard resource cards render.
   Short displays and narrow screens keep their existing scroll behavior. */

@media screen and (min-width:1050px) and (min-height:580px) {
  html:has(.v220-dashboard .clokit-resources-panel),
  body:has(.v220-dashboard .clokit-resources-panel) {
    height:100%;
    overflow-y:hidden!important;
    overscroll-behavior-y:contain;
  }
  body .page:has(.v220-dashboard .clokit-resources-panel) {
    width:100%!important;
    max-width:none!important;
    height:calc(100dvh - 76px)!important;
    min-height:0!important;
    padding:6px 10px 0!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) {
    --v220-ink:#102541;
    --v220-line:#dce8f2;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    grid-template-columns:clamp(184px,15vw,224px) minmax(0,1fr) clamp(282px,22vw,336px)!important;
    background:linear-gradient(132deg,#f6fbff 0%,#edf5fb 65%,#f4f9fd 100%)!important;
    border:1px solid #dde9f2!important;
    border-radius:18px 18px 0 0!important;
    box-shadow:0 8px 24px rgba(12,49,77,.055)!important;
    overflow:hidden!important;
  }
  .v220-dashboard .v220-sidebar {
    padding:18px 12px!important;
    background:linear-gradient(180deg,#f3f9fd,#eaf3fa)!important;
    gap:5px!important;
    min-height:0!important;
    border-right:1px solid #dce7f0!important;
  }
  .v220-dashboard .v220-side-title {
    padding:10px 11px 5px!important;
    color:#607b99!important;
    letter-spacing:.1em!important;
  }
  .v220-dashboard .v220-nav-btn {
    min-height:42px!important;
    padding:7px 9px!important;
    grid-template-columns:29px minmax(0,1fr) auto!important;
    gap:8px!important;
    border-radius:12px!important;
    font-size:13px!important;
  }
  .v220-dashboard .v220-nav-btn.active {
    background:#fff!important;
    color:#0877d8!important;
    box-shadow:inset 4px 0 0 #138bfa,0 4px 14px rgba(16,94,154,.06)!important;
  }
  .v220-dashboard .v220-nav-btn .ico {
    width:28px!important;
    height:28px!important;
    font-size:18px!important;
  }
  .v220-dashboard .v220-user-chip {display:none!important;}
  .v220-dashboard .v220-center {
    padding:17px 16px 15px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
    background:linear-gradient(145deg,rgba(255,255,255,.40),rgba(241,249,254,.25));
  }
  .v220-dashboard .v220-topline {
    flex:0 0 auto!important;
    align-items:flex-start!important;
    padding:0!important;
    margin:0!important;
    min-height:69px!important;
  }
  .v220-dashboard .v220-title h1 {
    font-size:clamp(25px,2.1vw,34px)!important;
    letter-spacing:-.045em!important;
    line-height:1.12!important;
    color:#071d38!important;
  }
  .v220-dashboard .v220-live-greeting {
    font-size:clamp(11px,.9vw,14px)!important;
    margin-top:6px!important;
  }
  .v220-dashboard .v220-top-actions.v220-dashboard-actions {margin:0!important;}
  .v220-dashboard .v220-new {
    height:46px!important;
    padding:0 18px!important;
    font-size:14px!important;
    background:linear-gradient(135deg,#0b9afb,#087cde)!important;
    box-shadow:0 6px 17px rgba(5,119,210,.18)!important;
    border-radius:12px!important;
  }

  .v220-dashboard .v220-welcome-video.clokit-resources-panel {
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head {
    flex:0 0 auto!important;
    margin:0!important;
    padding:0 2px 11px!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head h2 {
    font-size:clamp(19px,1.55vw,24px)!important;
    line-height:1.14!important;
    color:#112842!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head p {
    color:#657e95!important;
    font-size:clamp(11px,.82vw,13px)!important;
    line-height:1.35!important;
  }
  .v220-dashboard .clokit-resource-grid {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    align-items:stretch!important;
    flex:0 0 auto!important;
    min-height:0!important;
    padding:0 2px 1px!important;
  }
  .v220-dashboard .clokit-resource-card {
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:clamp(12px,1vw,17px)!important;
    gap:clamp(7px,.75vh,11px)!important;
    border-radius:15px!important;
    border:1px solid #dce7f0!important;
    background:linear-gradient(167deg,#fff 5%,#f8fbfe 100%)!important;
    box-shadow:0 6px 18px rgba(23,66,101,.045)!important;
    overflow:hidden!important;
  }
  .v220-dashboard .clokit-resource-card:nth-child(2) {background:linear-gradient(167deg,#fff,#f5fbff)!important;}
  .v220-dashboard .clokit-resource-card:nth-child(3) {background:linear-gradient(167deg,#fff,#f9faff)!important;}
  .v220-dashboard .clokit-resource-icon {
    width:43px!important;
    height:43px!important;
    font-size:21px!important;
    border-radius:12px!important;
    background:#eaf3ff!important;
  }
  .v220-dashboard .clokit-resource-card h3 {
    font-size:clamp(15px,1.13vw,19px)!important;
    letter-spacing:-.025em!important;
    line-height:1.22!important;
    color:#0a2342!important;
  }
  .v220-dashboard .clokit-resource-card p {
    font-size:clamp(11px,.87vw,13px)!important;
    color:#627c96!important;
    line-height:1.43!important;
    overflow-wrap:break-word!important;
  }
  .v220-dashboard .clokit-resource-status {
    font-size:clamp(8px,.65vw,10px)!important;
    letter-spacing:.07em!important;
    line-height:1.25!important;
  }
  .v220-dashboard .clokit-resource-actions {gap:6px!important; margin-top:auto!important;}
  .v220-dashboard .clokit-resource-actions button {
    padding:10px 12px!important;
    font-size:clamp(10px,.8vw,12px)!important;
    border-radius:10px!important;
    min-height:36px!important;
  }
  .v220-dashboard .clokit-resource-actions .active {
    background:#0b2943!important;
    color:#fff!important;
    box-shadow:0 4px 12px rgba(15,40,68,.09)!important;
  }
  .v220-dashboard .clokit-resource-actions .pending {
    background:#edf4fa!important;
    color:#4b6987!important;
  }

  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) {
    flex:0 0 auto!important;
    margin:0!important;
    padding:13px 14px!important;
    border-radius:16px!important;
    border:1px solid #dce8f2!important;
    background:rgba(255,255,255,.87)!important;
    box-shadow:0 6px 18px rgba(21,60,95,.035)!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head {
    margin-bottom:9px!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head h2 {
    font-size:clamp(16px,1.2vw,20px)!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head p {
    font-size:11px!important;
    line-height:1.4!important;
    margin:2px 0 0!important;
    color:#728aa1!important;
  }
  .v220-dashboard .v220-training-grid {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px!important;
    margin:0!important;
  }
  .v220-dashboard .v220-training-card {
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:9px!important;
    align-content:center!important;
    padding:9px!important;
    min-height:58px!important;
    border-radius:11px!important;
    border:1px solid #e0ebf4!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  .v220-dashboard .v220-training-icon {
    grid-row:1/3!important;
    width:32px!important;
    height:32px!important;
    font-size:17px!important;
    margin:0!important;
    border-radius:9px!important;
  }
  .v220-dashboard .v220-training-card h3 {
    margin:0!important;
    font-size:clamp(10px,.75vw,12px)!important;
    line-height:1.3!important;
  }
  .v220-dashboard .v220-training-card p {
    margin:1px 0 0!important;
    font-size:clamp(9px,.66vw,11px)!important;
    line-height:1.24!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }
  .v220-dashboard .v220-right {
    display:flex!important;
    flex-direction:column!important;
    padding:10px!important;
    background:linear-gradient(180deg,#f2f8fd,#eaf3fa)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .v220-dashboard .v220-right-tabs {margin:0!important;flex:0 0 auto!important;}
  .v220-dashboard .v220-right-tabs button {
    border-radius:14px 14px 0 0!important;
    padding:9px 11px!important;
    font-size:14px!important;
    background:#fff!important;
    text-align:left!important;
  }
  .v220-dashboard .v220-focus {
    flex:0 0 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    border-radius:0 0 15px 15px!important;
    padding:12px!important;
    border:1px solid #dfeaf2!important;
    box-shadow:0 6px 20px rgba(25,70,107,.035)!important;
  }
  .v220-dashboard .v220-focus-kicker {font-size:9px!important;}
  .v220-dashboard .v220-focus h2 {font-size:23px!important;margin:4px 0 0!important;}
  .v220-dashboard .v220-focus p {font-size:11px!important;line-height:1.3!important;}
  .v220-dashboard .v220-plan {
    flex:0 0 auto!important;
    min-height:46px!important;
    max-height:120px!important;
    aspect-ratio:auto!important;
    margin:10px 0!important;
    padding:8px!important;
    border-radius:12px!important;
    overflow:hidden!important;
  }
  .v220-dashboard .v220-plan-empty {padding:4px!important;font-size:11px!important;line-height:1.42!important;}
  .v220-dashboard .v220-focus-stats {flex:0 0 auto!important;gap:7px!important;}
  .v220-dashboard .v220-focus-stat {padding:8px!important;border-radius:9px!important;}
  .v220-dashboard .v220-focus-stat span {font-size:9px!important;}
  .v220-dashboard .v220-focus-stat b {font-size:17px!important;}
  .v220-dashboard .v220-focus-actions {flex:0 0 auto!important;gap:7px!important;margin-top:9px!important;}
  .v220-dashboard .v220-focus-actions button {padding:10px 6px!important;border-radius:9px!important;font-size:12px!important;}

  .v220-dashboard .v220-activity {
    flex:0 0 auto!important;
    margin-top:12px!important;
    padding:11px 13px 8px!important;
    background:rgba(255,255,255,.93)!important;
    border:1px solid #dce8f2!important;
    border-radius:15px!important;
    box-shadow:0 6px 18px rgba(25,70,107,.035)!important;
  }
  .v220-dashboard .v220-activity h3 {
    font-size:17px!important;
    margin:0 0 5px!important;
    color:#112842!important;
  }
  .v220-dashboard .v220-activity-item {
    grid-template-columns:27px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    padding:5px 0!important;
  }
  .v220-dashboard .v220-activity-item i {width:27px!important;height:27px!important;font-size:13px!important;border-radius:8px!important;background:#eaf4fd!important;}
  .v220-dashboard .v220-activity-item b {font-size:11px!important;line-height:1.15!important;}
  .v220-dashboard .v220-activity-item span {font-size:9px!important;margin-top:1px!important;}
  .v220-dashboard .v220-side-photos {display:none!important;}
}

/* Compact laptop viewport — applies even with Chrome sidebar or 125% scale.
   Keep project actions, training and activity visible without a page scroll. */
@media screen and (min-width:1050px) and (max-height:735px) and (min-height:580px) {
  body .page:has(.v220-dashboard .clokit-resources-panel) {
    height:calc(100dvh - 67px)!important;
    padding:3px 7px 0!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) {
    grid-template-columns:clamp(170px,14vw,198px) minmax(0,1fr) clamp(252px,21vw,288px)!important;
  }
  .v220-dashboard .v220-center {
    gap:8px!important;
    padding:12px 12px 10px!important;
  }
  .v220-dashboard .v220-topline {
    min-height:53px!important;
  }
  .v220-dashboard .v220-title h1 {font-size:clamp(23px,2vw,29px)!important;}
  .v220-dashboard .v220-new {height:39px!important;font-size:12px!important;padding:0 13px!important;}
  .v220-dashboard .v220-live-greeting {font-size:11px!important;margin-top:4px!important;}
  .v220-dashboard .clokit-resources-panel .v220-panel-head {
    padding:0 1px 7px!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head h2 {font-size:19px!important;}
  .v220-dashboard .clokit-resources-panel .v220-panel-head p {font-size:10px!important;}
  .v220-dashboard .clokit-resource-grid {gap:9px!important;}
  .v220-dashboard .clokit-resource-card {
    padding:11px!important;
    gap:6px!important;
  }
  .v220-dashboard .clokit-resource-icon {width:33px!important;height:33px!important;font-size:17px!important;}
  .v220-dashboard .clokit-resource-card h3 {font-size:clamp(13px,1.15vw,16px)!important;line-height:1.2!important;}
  .v220-dashboard .clokit-resource-card p {
    font-size:clamp(10px,.82vw,12px)!important;
    line-height:1.34!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:5!important;
    overflow:hidden!important;
  }
  .v220-dashboard .clokit-resource-status {font-size:8px!important;}
  .v220-dashboard .clokit-resource-actions button {
    min-height:32px!important;
    padding:7px 8px!important;
    font-size:10px!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) {
    padding:9px 11px!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head {margin-bottom:5px!important;}
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head h2 {font-size:16px!important;}
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head p {
    font-size:10px!important;
    line-height:1.25!important;
  }
  .v220-dashboard .v220-training-grid {gap:6px!important;}
  .v220-dashboard .v220-training-card {
    min-height:48px!important;
    grid-template-columns:26px minmax(0,1fr)!important;
    column-gap:6px!important;
    padding:5px!important;
  }
  .v220-dashboard .v220-training-icon {width:26px!important;height:26px!important;font-size:14px!important;}
  .v220-dashboard .v220-training-card h3 {font-size:10px!important;}
  .v220-dashboard .v220-training-card p {font-size:9px!important;-webkit-line-clamp:1!important;}
  .v220-dashboard .v220-sidebar {padding:10px 8px!important;gap:2px!important;}
  .v220-dashboard .v220-side-title {padding:6px 8px 2px!important;font-size:10px!important;}
  .v220-dashboard .v220-nav-btn {padding:4px 7px!important;min-height:37px!important;font-size:12px!important;}
  .v220-dashboard .v220-right {padding:7px!important;}
  .v220-dashboard .v220-right-tabs button {font-size:12px!important;padding:7px 9px!important;}
  .v220-dashboard .v220-focus {padding:9px!important;}
  .v220-dashboard .v220-focus h2 {font-size:20px!important;}
  .v220-dashboard .v220-plan {min-height:45px!important;max-height:105px!important;margin:7px 0!important;padding:5px!important;}
  .v220-dashboard .v220-plan-empty {font-size:10px!important;line-height:1.3!important;}
  .v220-dashboard .v220-focus-stat {padding:6px!important;}
  .v220-dashboard .v220-focus-stat b {font-size:14px!important;}
  .v220-dashboard .v220-focus-actions {margin-top:7px!important;}
  .v220-dashboard .v220-focus-actions button {padding:7px 5px!important;font-size:11px!important;}
  .v220-dashboard .v220-activity {padding:8px 9px 5px!important;margin-top:8px!important;}
  .v220-dashboard .v220-activity h3 {font-size:14px!important;margin:0 0 2px!important;}
  .v220-dashboard .v220-activity-item {padding:3px 0!important;gap:5px!important;}
  .v220-dashboard .v220-activity-item i {width:23px!important;height:23px!important;}
  .v220-dashboard .v220-activity-item b {font-size:10px!important;}
}
/* Extra-short laptop screens must not trap focus or clip important controls. */
@media screen and (min-width:1050px) and (max-height:579px) {
  html:has(.v220-dashboard .clokit-resources-panel),
  body:has(.v220-dashboard .clokit-resources-panel) {
    overflow-y:auto!important;
  }
}
/* On smaller and lower-resolution devices, prioritize access to all controls:
   preserve the existing responsive scroll behavior instead of clipping data. */
@media screen and (max-height:739px) and (min-width:1280px) {
  .v220-dashboard .clokit-resource-card {min-height:0!important;}
}


/* ClokIt USA universal responsive dashboard — tablet and phone presentation v3 */
/* Desktop command board stays within the viewport where practical.
   Smaller devices retain vertical scrolling so no interactive controls are hidden. */

/* Tablets and smaller laptops, including landscape tablets and split-screen desktops */
@media screen and (min-width:761px) and (max-width:1049px) {
  html:has(.v220-dashboard .clokit-resources-panel),
  body:has(.v220-dashboard .clokit-resources-panel) {
    height:auto!important;
    overflow-y:auto!important;
  }
  body .page:has(.v220-dashboard .clokit-resources-panel) {
    max-width:100%!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    margin:0!important;
    padding:10px 10px 50px!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) {
    display:grid!important;
    grid-template-columns:clamp(148px,19vw,188px) minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-width:none!important;
    border:1px solid #dbe7f0!important;
    border-radius:18px!important;
    overflow:visible!important;
    box-shadow:0 10px 28px rgba(19,60,95,.05)!important;
    background:linear-gradient(140deg,#f8fbfe,#edf5fb)!important;
  }
  .v220-dashboard .v220-sidebar {
    grid-column:1!important;
    grid-row:1 / 3!important;
    display:flex!important;
    padding:15px 9px!important;
    gap:5px!important;
    border-radius:18px 0 0 18px!important;
    background:#eef6fc!important;
  }
  .v220-dashboard .v220-nav-btn {
    font-size:12px!important;
    padding:8px 6px!important;
    grid-template-columns:24px minmax(0,1fr) auto!important;
    gap:6px!important;
    border-radius:10px!important;
  }
  .v220-dashboard .v220-center {
    grid-column:2!important;
    grid-row:1!important;
    display:block!important;
    padding:20px 15px!important;
    overflow:visible!important;
    min-width:0!important;
  }
  .v220-dashboard .v220-title h1 {
    color:#102743!important;
    font-size:clamp(25px,3vw,32px)!important;
    line-height:1.15!important;
  }
  .v220-dashboard .v220-topline {margin:0 0 22px!important;align-items:center!important;}
  .v220-dashboard .v220-new {height:42px!important;border-radius:11px!important;}
  .v220-dashboard .clokit-resources-panel.v220-welcome-video {
    padding:0 0 17px!important;
    margin:0!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head {
    padding:0 2px 12px!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head h2 {
    font-size:21px!important;
    color:#112943!important;
  }
  .v220-dashboard .clokit-resource-grid {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    padding:0!important;
  }
  .v220-dashboard .clokit-resource-card {
    min-height:195px!important;
    padding:15px!important;
    gap:9px!important;
    border:1px solid #deebf4!important;
    border-radius:15px!important;
    background:linear-gradient(165deg,#fff,#f8fbfe)!important;
    box-shadow:0 6px 18px rgba(20,66,103,.045)!important;
  }
  .v220-dashboard .clokit-resource-card:nth-child(3) {
    grid-column:1 / -1!important;
    min-height:130px!important;
  }
  .v220-dashboard .clokit-resource-card h3 {font-size:17px!important;}
  .v220-dashboard .clokit-resource-card p {font-size:12px!important;line-height:1.46!important;}
  .v220-dashboard .clokit-resource-actions button {min-height:42px!important;}
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) {
    padding:13px 14px!important;
    border:1px solid #e0ebf3!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(23,61,91,.035)!important;
  }
  .v220-dashboard .v220-training-grid {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:9px!important;
  }
  .v220-dashboard .v220-training-card {
    padding:10px!important;
    border-radius:12px!important;
    min-height:86px!important;
    box-shadow:none!important;
  }
  .v220-dashboard .v220-training-icon {width:32px!important;height:32px!important;font-size:17px!important;margin-bottom:7px!important;}
  .v220-dashboard .v220-training-card h3 {font-size:13px!important;}
  .v220-dashboard .v220-training-card p {font-size:11px!important;}
  .v220-dashboard .v220-right {
    grid-column:2!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr)!important;
    grid-template-rows:auto 1fr!important;
    gap:12px!important;
    padding:0 15px 18px!important;
    min-width:0!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  .v220-dashboard .v220-right-tabs {
    grid-column:1 / -1!important;
    margin:0!important;
  }
  .v220-dashboard .v220-right-tabs button {
    font-size:17px!important;
    padding:10px 12px!important;
    text-align:left!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#12304b!important;
  }
  .v220-dashboard .v220-focus {
    grid-column:1!important;
    grid-row:2!important;
    padding:14px!important;
    border-radius:15px!important;
    border:1px solid #deebf4!important;
    background:#fff!important;
  }
  .v220-dashboard .v220-plan {
    aspect-ratio:auto!important;
    min-height:90px!important;
    max-height:150px!important;
    padding:10px!important;
    margin:12px 0!important;
  }
  .v220-dashboard .v220-plan-empty {font-size:12px!important;padding:10px!important;}
  .v220-dashboard .v220-activity {
    grid-column:2!important;
    grid-row:2!important;
    align-self:start!important;
    display:block!important;
    margin:0!important;
    padding:13px!important;
    border:1px solid #deebf4!important;
    border-radius:15px!important;
    background:#fff!important;
  }
  .v220-dashboard .v220-activity h3 {font-size:16px!important;}
  .v220-dashboard .v220-activity-item {padding:10px 0!important;}
  .v220-dashboard .v220-side-photos {display:none!important;}
}

/* Phones: same approved visual language, compact stacked cards, real project actions. */
@media screen and (max-width:760px) {
  html:has(.v220-dashboard .clokit-resources-panel),
  body:has(.v220-dashboard .clokit-resources-panel) {
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }
  body .page:has(.v220-dashboard .clokit-resources-panel) {
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:7px 9px calc(110px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    background:#f3f8fc!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) {
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:linear-gradient(180deg,#f7fbfe,#edf5fa)!important;
  }
  .v220-dashboard .v220-sidebar {display:none!important;}
  .v220-dashboard .v220-center {
    order:1!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    padding:14px 11px 0!important;
    background:transparent!important;
  }
  .v220-dashboard .v220-topline {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:0!important;
    margin:0 0 22px!important;
    min-height:0!important;
  }
  .v220-dashboard .v220-title>h1 {
    display:block!important;
    margin:0!important;
    font-size:clamp(24px,6.8vw,30px)!important;
    line-height:1.14!important;
    letter-spacing:-.04em!important;
    color:#092441!important;
  }
  .v220-dashboard .v220-live-greeting {
    display:flex!important;
    gap:7px!important;
    font-size:12px!important;
    line-height:1.35!important;
    margin:7px 0 0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    font-weight:650!important;
    color:#627e98!important;
  }
  .v220-dashboard .v220-live-dot {
    flex:0 0 8px!important;
    width:8px!important;
    height:8px!important;
    margin:4px 0 0!important;
  }
  .v220-dashboard .v220-top-actions.v220-dashboard-actions {
    display:flex!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    justify-content:stretch!important;
  }
  .v220-dashboard .v220-new {
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 14px!important;
    border-radius:12px!important;
    color:#fff!important;
    font-size:13px!important;
    background:linear-gradient(125deg,#0f9af0,#087ada)!important;
    box-shadow:0 6px 17px rgba(9,125,208,.17)!important;
  }
  .v220-dashboard .v220-welcome-video.clokit-resources-panel {
    display:block!important;
    padding:0 0 12px!important;
    margin:0!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head {padding:0 0 11px!important;margin:0!important;}
  .v220-dashboard .clokit-resources-panel .v220-panel-head h2 {font-size:20px!important;line-height:1.1!important;color:#102945!important;}
  .v220-dashboard .clokit-resources-panel .v220-panel-head p {font-size:12px!important;line-height:1.35!important;color:#68829a!important;}
  .v220-dashboard .clokit-resource-grid {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    padding:0!important;
    min-width:0!important;
  }
  .v220-dashboard .clokit-resource-card {
    display:grid!important;
    grid-template-columns:43px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    column-gap:10px!important;
    row-gap:5px!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:12px!important;
    border-radius:14px!important;
    border:1px solid #dce9f3!important;
    background:linear-gradient(170deg,#fff,#f8fbff)!important;
    box-shadow:0 5px 15px rgba(19,62,98,.045)!important;
    overflow:visible!important;
  }
  .v220-dashboard .clokit-resource-icon {
    grid-column:1!important;
    grid-row:1 / 3!important;
    width:43px!important;
    height:43px!important;
    border-radius:12px!important;
    font-size:20px!important;
    background:#e9f3ff!important;
  }
  .v220-dashboard .clokit-resource-status {
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
    font-size:9px!important;
    letter-spacing:.055em!important;
  }
  .v220-dashboard .clokit-resource-card h3 {
    grid-column:2!important;
    grid-row:2!important;
    font-size:clamp(15px,4vw,17px)!important;
    line-height:1.23!important;
    letter-spacing:-.025em!important;
    margin:0!important;
    overflow-wrap:break-word!important;
  }
  .v220-dashboard .clokit-resource-card p {
    grid-column:1 / -1!important;
    grid-row:3!important;
    margin:3px 0 0!important;
    font-size:12px!important;
    line-height:1.42!important;
    color:#66809a!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }
  .v220-dashboard .clokit-resource-actions {
    grid-column:1 / -1!important;
    grid-row:4!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin:6px 0 0!important;
  }
  .v220-dashboard .clokit-resource-actions button {
    min-height:44px!important;
    padding:10px 12px!important;
    flex:1 1 auto!important;
    border-radius:10px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  .v220-dashboard .clokit-resource-actions .active {background:#0c2c46!important;color:#fff!important;}
  .v220-dashboard .clokit-resource-actions .pending {background:#eff5fb!important;color:#55718a!important;}
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) {
    margin:0!important;
    padding:13px!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid #dce8f2!important;
    box-shadow:0 5px 17px rgba(22,66,101,.045)!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head {margin:0 0 10px!important;}
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head h2 {
    font-size:18px!important;
    color:#112945!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head p {font-size:11px!important;color:#71869c!important;line-height:1.35!important;}
  .v220-dashboard .v220-training-grid {display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:0!important;}
  .v220-dashboard .v220-training-card {
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-content:center!important;
    column-gap:10px!important;
    width:100%!important;
    min-width:0!important;
    padding:10px!important;
    min-height:60px!important;
    border:1px solid #e3edf5!important;
    border-radius:11px!important;
    background:#fff!important;
    box-shadow:none!important;
    text-align:left!important;
  }
  .v220-dashboard .v220-training-icon {grid-column:1!important;grid-row:1 / 3!important;width:38px!important;height:38px!important;margin:0!important;border-radius:10px!important;font-size:20px!important;}
  .v220-dashboard .v220-training-card h3 {grid-column:2!important;grid-row:1!important;margin:0!important;font-size:13px!important;}
  .v220-dashboard .v220-training-card p {grid-column:2!important;grid-row:2!important;margin:2px 0 0!important;font-size:11px!important;line-height:1.3!important;color:#71869a!important;}
  .v220-dashboard .v220-right {
    order:2!important;
    display:block!important;
    visibility:visible!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0 11px 8px!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  .v220-dashboard .v220-right-tabs {margin:0!important;display:block!important;}
  .v220-dashboard .v220-right-tabs button.active {
    display:block!important;
    width:100%!important;
    text-align:left!important;
    color:#102a46!important;
    font-size:18px!important;
    border-radius:15px 15px 0 0!important;
    padding:12px 14px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  .v220-dashboard .v220-focus {
    display:block!important;
    padding:14px!important;
    border:1px solid #dce8f2!important;
    border-radius:0 0 15px 15px!important;
    box-shadow:0 6px 18px rgba(20,61,94,.045)!important;
    background:#fff!important;
  }
  .v220-dashboard .v220-focus-kicker {font-size:10px!important;}
  .v220-dashboard .v220-focus h2 {font-size:22px!important;margin:4px 0 2px!important;}
  .v220-dashboard .v220-focus p {font-size:12px!important;}
  .v220-dashboard .v220-plan {
    aspect-ratio:auto!important;
    min-height:82px!important;
    max-height:180px!important;
    padding:9px!important;
    margin:12px 0!important;
    border-radius:12px!important;
  }
  .v220-dashboard .v220-plan-empty {padding:8px!important;font-size:12px!important;line-height:1.37!important;}
  .v220-dashboard .v220-focus-stats {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .v220-dashboard .v220-focus-stat {padding:10px!important;border-radius:10px!important;}
  .v220-dashboard .v220-focus-stat b {font-size:19px!important;}
  .v220-dashboard .v220-focus-actions {display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin:12px 0 0!important;}
  .v220-dashboard .v220-focus-actions button {min-height:44px!important;padding:10px 8px!important;border-radius:11px!important;font-size:13px!important;}
  .v220-dashboard .v220-activity {
    display:block!important;
    margin-top:12px!important;
    padding:13px!important;
    border:1px solid #dce8f2!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 5px 17px rgba(22,66,101,.045)!important;
  }
  .v220-dashboard .v220-activity h3 {margin:0 0 8px!important;font-size:17px!important;}
  .v220-dashboard .v220-activity-item {padding:9px 0!important;}
  .v220-dashboard .v220-activity-item i {width:32px!important;height:32px!important;}
  .v220-dashboard .v220-activity-item b {font-size:12px!important;}
  .v220-dashboard .v220-activity-item span {font-size:11px!important;}
  .v220-dashboard .v220-side-photos {display:none!important;}
  .v220-dashboard button,
  .v220-dashboard a[role="button"] {touch-action:manipulation!important;}
}

/* Larger phones/landscape: resource cards and training compact into two columns. */
@media screen and (min-width:560px) and (max-width:760px) {
  .v220-dashboard .clokit-resource-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .v220-dashboard .clokit-resource-card:nth-child(3) {grid-column:1 / -1!important;}
  .v220-dashboard .v220-training-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .v220-dashboard .v220-training-card:last-child {grid-column:1 / -1!important;}
}

/* Tightest portrait widths: no sideways overflow; all controls remain reachable. */
@media screen and (max-width:359px) {
  .v220-dashboard .v220-center {padding-left:7px!important;padding-right:7px!important;}
  .v220-dashboard .v220-right {padding-left:7px!important;padding-right:7px!important;}
  .v220-dashboard .clokit-resource-card {padding:10px!important;column-gap:8px!important;}
  .v220-dashboard .clokit-resource-actions .pending {flex:1 1 30%!important;min-width:0!important;padding:9px 4px!important;font-size:11px!important;}
  .v220-dashboard .v220-focus-actions button {font-size:12px!important;}
}

/* Landscape phones or zoomed browsers: always allow vertical scrolling. */
@media screen and (max-height:520px) and (max-width:1049px) {
  html:has(.v220-dashboard .clokit-resources-panel),
  body:has(.v220-dashboard .clokit-resources-panel) {overflow-y:auto!important;height:auto!important;}
  .v220-dashboard:has(.clokit-resources-panel) {height:auto!important;overflow:visible!important;}
}


/* v5 — ClokIt balanced firm dashboard: desktop visual-scale and vertical composition */
/* Preserve all existing DOM actions and data. Rebalance only the large-screen dashboard:
   modest resource-card height; roomier training, activity and focus panels. */
@media screen and (min-width:1050px) and (min-height:740px) {
  .v220-dashboard:has(.clokit-resources-panel) {
    --v220-ink:#0c2943;
    --v220-line:#dce7f0;
  }
  .v220-dashboard .v220-center {
    padding:20px 20px 16px!important;
    gap:15px!important;
  }
  .v220-dashboard .v220-topline {
    min-height:75px!important;
    align-items:flex-start!important;
  }
  .v220-dashboard .v220-title h1 {
    font-size:clamp(30px,2.25vw,36px)!important;
    line-height:1.13!important;
  }
  .v220-dashboard .v220-live-greeting {
    font-size:clamp(12px,.95vw,15px)!important;
    margin-top:7px!important;
  }
  .v220-dashboard .v220-new {
    height:46px!important;
    padding:0 20px!important;
    font-size:14px!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head {
    padding:0 2px 12px!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head h2 {
    font-size:clamp(22px,1.6vw,25px)!important;
  }
  .v220-dashboard .clokit-resources-panel .v220-panel-head p {
    font-size:clamp(12px,.87vw,14px)!important;
  }
  .v220-dashboard .clokit-resource-grid {gap:13px!important;}
  .v220-dashboard .clokit-resource-card {
    min-height:clamp(226px,29vh,325px)!important;
    height:auto!important;
    padding:clamp(15px,1.18vw,20px)!important;
    gap:10px!important;
    border-radius:16px!important;
    box-shadow:0 7px 19px rgba(22,61,94,.055)!important;
  }
  .v220-dashboard .clokit-resource-icon {
    width:45px!important;
    height:45px!important;
    font-size:22px!important;
  }
  .v220-dashboard .clokit-resource-card h3 {
    font-size:clamp(17px,1.22vw,20px)!important;
    line-height:1.22!important;
  }
  .v220-dashboard .clokit-resource-card p {
    font-size:clamp(12px,.92vw,14px)!important;
    line-height:1.45!important;
  }
  .v220-dashboard .clokit-resource-status {font-size:10px!important;}
  .v220-dashboard .clokit-resource-actions button {
    min-height:39px!important;
    padding:10px 13px!important;
    font-size:12px!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) {
    padding:17px 18px!important;
    border-radius:17px!important;
    box-shadow:0 7px 20px rgba(21,61,96,.048)!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head {
    margin-bottom:12px!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head h2 {
    font-size:clamp(20px,1.35vw,23px)!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head p {
    font-size:12px!important;
    line-height:1.4!important;
  }
  .v220-dashboard .v220-training-grid {gap:11px!important;}
  .v220-dashboard .v220-training-card {
    min-height:clamp(120px,17vh,195px)!important;
    padding:14px!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    column-gap:11px!important;
    align-content:start!important;
    align-items:center!important;
    background:linear-gradient(160deg,#fff,#f9fcff)!important;
    border-radius:13px!important;
    box-shadow:0 3px 10px rgba(18,67,103,.025)!important;
  }
  .v220-dashboard .v220-training-icon {
    width:40px!important;
    height:40px!important;
    font-size:20px!important;
    border-radius:10px!important;
  }
  .v220-dashboard .v220-training-card h3 {
    font-size:clamp(12px,.86vw,15px)!important;
    line-height:1.25!important;
  }
  .v220-dashboard .v220-training-card p {
    font-size:clamp(10px,.74vw,12px)!important;
    line-height:1.35!important;
  }
  .v220-dashboard .v220-right {
    padding:13px!important;
  }
  .v220-dashboard .v220-right-tabs button {
    padding:11px 12px!important;
    font-size:16px!important;
  }
  .v220-dashboard .v220-focus {
    padding:14px!important;
    border-radius:0 0 16px 16px!important;
  }
  .v220-dashboard .v220-focus-kicker {font-size:10px!important;}
  .v220-dashboard .v220-focus h2 {font-size:25px!important;}
  .v220-dashboard .v220-focus p {font-size:12px!important;}
  .v220-dashboard .v220-plan {
    min-height:clamp(82px,12vh,145px)!important;
    max-height:155px!important;
    margin:11px 0!important;
    padding:9px!important;
  }
  .v220-dashboard .v220-plan-empty {font-size:12px!important;}
  .v220-dashboard .v220-focus-stat {padding:11px 9px!important;}
  .v220-dashboard .v220-focus-stat span {font-size:10px!important;}
  .v220-dashboard .v220-focus-stat b {font-size:19px!important;}
  .v220-dashboard .v220-focus-actions button {
    min-height:41px!important;
    font-size:13px!important;
  }
  .v220-dashboard .v220-activity {
    margin-top:16px!important;
    padding:15px 14px!important;
    border-radius:16px!important;
    box-shadow:0 7px 19px rgba(20,61,95,.045)!important;
  }
  .v220-dashboard .v220-activity h3 {
    font-size:19px!important;
    margin:0 0 10px!important;
  }
  .v220-dashboard .v220-activity-item {
    padding:10px 0!important;
    grid-template-columns:33px minmax(0,1fr)!important;
    gap:9px!important;
  }
  .v220-dashboard .v220-activity-item i {
    width:33px!important;
    height:33px!important;
    font-size:16px!important;
  }
  .v220-dashboard .v220-activity-item b {font-size:12px!important;}
  .v220-dashboard .v220-activity-item span {font-size:10px!important;}
}
/* Moderate laptop height: preserve the compact existing rules rather than clipping actions.
   Standard and large desktop windows receive the balanced treatment above. */

/* v6 — balanced short-desktop command board */
/* On laptops with reduced CSS viewport height (browser toolbars, scaling or split screen),
   earlier rules shrank typography and made the interface feel zoomed out.
   Rebalance the visible information rather than zooming the browser or filling empty cards. */
@media screen and (min-width:1050px) and (min-height:650px) and (max-height:739px) {
  .v220-dashboard .v220-center {
    padding:14px 15px 12px!important;
    gap:12px!important;
  }
  .v220-dashboard .v220-topline {min-height:66px!important;}
  .v220-dashboard .v220-title h1 {font-size:clamp(28px,2.15vw,32px)!important;line-height:1.13!important;}
  .v220-dashboard .v220-live-greeting {font-size:12px!important;margin-top:5px!important;}
  .v220-dashboard .v220-new {min-height:42px!important;height:42px!important;padding:0 16px!important;font-size:13px!important;}
  .v220-dashboard .clokit-resources-panel .v220-panel-head {padding:0 2px 9px!important;}
  .v220-dashboard .clokit-resources-panel .v220-panel-head h2 {font-size:22px!important;}
  .v220-dashboard .clokit-resources-panel .v220-panel-head p {font-size:12px!important;line-height:1.35!important;}
  .v220-dashboard .clokit-resource-grid {gap:12px!important;}
  .v220-dashboard .clokit-resource-card {
    min-height:clamp(235px,35dvh,270px)!important;
    height:auto!important;
    gap:8px!important;
    padding:15px!important;
    border-radius:15px!important;
    box-shadow:0 6px 18px rgba(23,66,101,.055)!important;
  }
  .v220-dashboard .clokit-resource-icon {width:40px!important;height:40px!important;font-size:20px!important;}
  .v220-dashboard .clokit-resource-status {font-size:9px!important;}
  .v220-dashboard .clokit-resource-card h3 {font-size:clamp(16px,1.22vw,18px)!important;line-height:1.25!important;}
  .v220-dashboard .clokit-resource-card p {
    font-size:clamp(11px,.9vw,13px)!important;
    line-height:1.43!important;
    -webkit-line-clamp:5!important;
  }
  .v220-dashboard .clokit-resource-actions {gap:7px!important;}
  .v220-dashboard .clokit-resource-actions button {min-height:37px!important;padding:9px 12px!important;font-size:11px!important;}
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) {
    min-height:185px!important;
    padding:14px 15px!important;
    border-radius:16px!important;
  }
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head {margin-bottom:11px!important;}
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head h2 {font-size:20px!important;}
  .v220-dashboard .v220-center > .v220-panel:not(.v220-welcome-video) .v220-panel-head p {font-size:11px!important;line-height:1.37!important;}
  .v220-dashboard .v220-training-grid {gap:9px!important;}
  .v220-dashboard .v220-training-card {
    min-height:111px!important;
    padding:12px!important;
    column-gap:9px!important;
    grid-template-columns:35px minmax(0,1fr)!important;
    align-content:start!important;
    border-radius:12px!important;
    background:linear-gradient(165deg,#fff,#f9fcff)!important;
  }
  .v220-dashboard .v220-training-icon {width:35px!important;height:35px!important;font-size:18px!important;}
  .v220-dashboard .v220-training-card h3 {font-size:clamp(11px,.8vw,13px)!important;}
  .v220-dashboard .v220-training-card p {font-size:10px!important;line-height:1.35!important;-webkit-line-clamp:2!important;}
  .v220-dashboard .v220-sidebar {padding:13px 11px!important;gap:4px!important;}
  .v220-dashboard .v220-side-title {font-size:11px!important;padding:8px 10px 4px!important;}
  .v220-dashboard .v220-nav-btn {min-height:41px!important;padding:6px 8px!important;font-size:13px!important;}
  .v220-dashboard .v220-right {padding:10px!important;}
  .v220-dashboard .v220-right-tabs button {font-size:15px!important;padding:9px 11px!important;}
  .v220-dashboard .v220-focus {padding:12px!important;}
  .v220-dashboard .v220-focus h2 {font-size:24px!important;}
  .v220-dashboard .v220-focus p {font-size:12px!important;}
  .v220-dashboard .v220-plan {min-height:90px!important;max-height:115px!important;margin:10px 0!important;padding:7px!important;}
  .v220-dashboard .v220-plan-empty {font-size:11px!important;line-height:1.38!important;}
  .v220-dashboard .v220-focus-stat {padding:9px!important;}
  .v220-dashboard .v220-focus-stat span {font-size:9px!important;}
  .v220-dashboard .v220-focus-stat b {font-size:17px!important;}
  .v220-dashboard .v220-focus-actions {margin-top:10px!important;}
  .v220-dashboard .v220-focus-actions button {padding:10px 6px!important;font-size:12px!important;}
  .v220-dashboard .v220-activity {padding:12px 13px!important;margin-top:13px!important;}
  .v220-dashboard .v220-activity h3 {font-size:18px!important;margin:0 0 6px!important;}
  .v220-dashboard .v220-activity-item {padding:7px 0!important;gap:8px!important;}
  .v220-dashboard .v220-activity-item i {width:29px!important;height:29px!important;font-size:14px!important;}
  .v220-dashboard .v220-activity-item b {font-size:11px!important;}
  .v220-dashboard .v220-activity-item span {font-size:10px!important;}
}
/* Fallback: short desktop viewports retain scrolling if the larger controls need it. */
@media screen and (min-width:1050px) and (max-height:649px) {
  html:has(.v220-dashboard .clokit-resources-panel),
  body:has(.v220-dashboard .clokit-resources-panel) {overflow-y:auto!important;height:auto!important;}
  body .page:has(.v220-dashboard .clokit-resources-panel) {height:auto!important;min-height:0!important;overflow:visible!important;}
  .v220-dashboard:has(.clokit-resources-panel) {height:auto!important;min-height:0!important;overflow:visible!important;}
  .v220-dashboard .v220-center,.v220-dashboard .v220-right {overflow:visible!important;}
}

/* ClokIt USA sidebar: premium navigation v8 — 2026-10-23.
   ONLY dashboard desktop sidebar. No layout dimensions, routes or data changed.
   Restore single-line Client Folders labels and make the refinement visible. */
@media screen and (min-width:821px){
  .v220-dashboard:has(.clokit-resources-panel) > .v220-sidebar{
    background:linear-gradient(165deg,#e9f3fb 0%,#e2eef8 55%,#dcebf7 100%)!important;
    border-right:1px solid #c8dcea!important;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.85)!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-side-title{
    color:#53748f!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
    text-shadow:none!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-side-title:first-child{
    display:flex!important;
    align-items:center!important;
    padding:10px 12px!important;
    background:linear-gradient(105deg,#102e47 0%,#175778 100%)!important;
    color:#f3faff!important;
    border:1px solid #2a6484!important;
    border-radius:10px!important;
    box-shadow:0 4px 13px rgba(12,43,69,.12)!important;
    letter-spacing:.115em!important;
    margin-bottom:5px!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-side-title:not(:first-child){
    border-top:1px solid #cbddeb!important;
    margin-top:7px!important;
    padding-top:11px!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-nav-btn{
    grid-template-columns:26px minmax(0,1fr) max-content!important;
    column-gap:6px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    color:#173e59!important;
    font-size:12.5px!important;
    font-weight:820!important;
    border:1px solid transparent!important;
    background:transparent!important;
    transform:none!important;
    transition:background-color .17s ease,border-color .17s ease,box-shadow .17s ease,color .17s ease!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-nav-btn > span:not(.ico){
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    min-width:0!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-nav-btn:not(.active):hover{
    background:rgba(255,255,255,.87)!important;
    border-color:#cadeee!important;
    box-shadow:0 3px 11px rgba(15,65,100,.075)!important;
    transform:none!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-nav-btn.active{
    color:#0671c7!important;
    background:linear-gradient(115deg,#ffffff 0%,#f3faff 100%)!important;
    border:1px solid #c7def0!important;
    box-shadow:inset 3px 0 0 #1298ed,0 5px 15px rgba(23,91,150,.11)!important;
    font-weight:900!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-nav-btn .ico{
    width:26px!important;
    height:26px!important;
    border-radius:8px!important;
    border:1px solid #cbddea!important;
    background:linear-gradient(150deg,#f8fcff,#dfedf8)!important;
    color:#356684!important;
    font-size:16px!important;
    box-sizing:border-box!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-nav-btn.active .ico{
    border-color:#badaf5!important;
    background:#e0f2ff!important;
    color:#087cda!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-nav-btn small{
    display:inline-block!important;
    flex:0 0 auto!important;
    color:#50718c!important;
    background:#d6e7f4!important;
    border:1px solid #c7dce9!important;
    border-radius:7px!important;
    font-weight:800!important;
    font-size:10px!important;
    line-height:1!important;
    padding:2px 4px!important;
    white-space:nowrap!important;
  }
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-nav-btn:focus-visible{
    outline:2px solid #1389ec!important;
    outline-offset:2px!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .v220-dashboard:has(.clokit-resources-panel) .v220-sidebar .v220-nav-btn{
    transition:none!important;
  }
}