/* Unified ProfilePro - Stage 3: Workspace (Workspace) inside the new web shell.
   Desktop (>=721px) only; mobile keeps its existing layout. */
@media (min-width:721px){
  html body[data-workspace-home]{padding-left:var(--app-sidebar-current) !important;transition:padding-left .22s var(--ease,ease);}
  html body[data-workspace-home]>.app-sidebar{display:flex !important;}
  html body[data-workspace-home] .wsh-sidebar{display:none !important;}
  html body[data-workspace-home] .wsh-main-column{margin-left:0 !important;}
  html body[data-workspace-home] .wsh-topbar-switcher{display:none !important;}
  /* the page's own view pills + workspace picker, shown on desktop too */
  html body[data-workspace-home] .wsh-mobile-views{display:flex;gap:8px;overflow-x:auto;margin:0 0 4px;padding:0 1px 4px;scrollbar-width:none;}
  html body[data-workspace-home] .wsh-mobile-views::-webkit-scrollbar{display:none;}
  html body[data-workspace-home] .wsh-mobile-views button{flex:none;height:36px;padding:0 16px;border:1px solid #e3e6e8;border-radius:999px;background:#fff;color:#111;font:500 13px 'Cabinet Grotesk',sans-serif;white-space:nowrap;cursor:pointer;}
  html body[data-workspace-home] .wsh-mobile-views button:hover{background:#f3f4f5;}
  html body[data-workspace-home] .wsh-mobile-views button.active{background:#F0F9F6;border-color:#0F766D;color:#0F766D;font-weight:500;}
  html body[data-workspace-home] .wsh-mobile-workspace-bar{display:flex;align-items:center;gap:8px;padding:10px 0 4px;max-width:420px;}
  html body[data-workspace-home] .wsh-mobile-workspace-bar select{flex:1;min-width:0;height:40px;border:1px solid #e3e6e8;border-radius:10px;background:#fff;color:#111;padding:0 10px;font:500 13px 'Cabinet Grotesk',sans-serif;}
  html body[data-workspace-home] .wsh-mobile-workspace-bar button{height:40px;width:42px;border:1px solid #111;border-radius:10px;background:#111;color:#fff;font-size:20px;cursor:pointer;}
}

/* Phones: same unified shell. Workspace's own logo and app switcher give way to the ProfilePro menu button. */
@media (max-width:720px){
  html body[data-workspace-home] .wsh-mobile-brand-row .wsh-brand,
  html body[data-workspace-home] .wsh-mobile-brand-row .wsh-dashboard-trigger{display:none !important;}
  html body[data-workspace-home] .wsh-mobile-brand-row{justify-content:space-between;}
}

/* Round: no notification bell or profile icon in the Workspace headers (web + phone) */
html body[data-workspace-home] .wsh-notification-button,
html body[data-workspace-home] .wsh-mobile-notice,
html body[data-workspace-home] .wsh-top-profile,
html body[data-workspace-home] #wshTopProfileBtn{display:none !important;}

/* Same page background as the Feed (--canvas grey). */
html body[data-workspace-home],html body[data-workspace-home] .wsh-app,html body[data-workspace-home] .wsh-main-column{background:var(--canvas-soft,#F8F8F7) !important;}


/* Stage 79: Workspace + Calendar share a softer page background (a touch closer to white than the Feed canvas) */
:root{--canvas-soft:#F8F8F7;}

/* Stage 80: workspace picker "+" white with a slight shadow (web + mobile); picker nudged left on web;
   grid/list view switcher selected state white with black icon (web + mobile) */
html body[data-workspace-home] .wsh-mobile-workspace-bar button,
html body[data-workspace-home] #wshMobileCreateWorkspace{background:#fff !important;color:#111 !important;border:1px solid #eceeef !important;box-shadow:0 1px 3px rgba(16,24,40,.14),0 1px 2px rgba(16,24,40,.08) !important;}
html body[data-workspace-home] .wsh-mobile-workspace-bar button:active{background:#fafafa !important;}
@media (min-width:721px){
  html body[data-workspace-home] .wsh-mobile-workspace-bar{margin-left:-12px;}
}
html body[data-workspace-home] .wsh-ab-layout button.on,
html body .wsh-ab-layout button.on{background:#fff !important;color:#111 !important;box-shadow:0 1px 3px rgba(16,24,40,.14),0 1px 2px rgba(16,24,40,.08);}
html body .wsh-ab-layout button.on svg{color:#111 !important;}

/* Search bars: mobile = white fill; web header = same fill as the workspace page background */
@media (max-width:720px){
  html body[data-workspace-home] .wsh-mobile-search,
  html body[data-workspace-home] .wsh-top-search.wsh-mobile-search{background:#fff !important;border-color:#e3e6e8 !important;}
  html body[data-workspace-home] .wsh-mobile-search input{background:transparent !important;}
}
@media (min-width:721px){
  html body[data-workspace-home] .wsh-topbar .wsh-top-search{background:var(--canvas-soft,#F8F8F7) !important;}
  html body[data-workspace-home] .wsh-topbar .wsh-top-search input{background:transparent !important;}
}

/* Stage 2: white Workspace page; search bars use the Feed grey (#F3F2F1) */
html body[data-workspace-home],html body[data-workspace-home] .wsh-app,html body[data-workspace-home] .wsh-main-column{background:#fff !important;}
@media (max-width:720px){
  html body[data-workspace-home] .wsh-mobile-search,
  html body[data-workspace-home] .wsh-top-search.wsh-mobile-search{background:#F3F2F1 !important;border-color:#e3e6e8 !important;}
}
@media (min-width:721px){
  html body[data-workspace-home] .wsh-topbar .wsh-top-search{background:#F3F2F1 !important;}
}
html body[data-workspace-home] .wsh-mobile-views button.active{background:#F0F9F6 !important;}

/* Mobile nav Stage 2 - phones: the shared ProfilePro menu + bottom bar work on Workspace.
   workspace.html hid .app-sidebar / .app-bottom-nav / .app-more-backdrop with body[data-workspace-home]
   !important rules, so tapping the Workspace menu icon slid the page aside and showed a BLANK panel.
   Desktop (>=721px) already re-enables the sidebar above; this does the same for phones. */
@media (max-width:720px){
  html body[data-workspace-home]>.app-sidebar{display:flex !important;}
  html body[data-workspace-home]>.app-more-backdrop{display:block !important;}
  html body[data-workspace-home]>.app-bottom-nav{display:flex !important;}
  html body[data-workspace-home] .wsh-main-column{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
}

/* ===== Mobile fixes (Workspace): visible title, white controls with a grey stroke, settings as a slide-in page ===== */
.wsm-bar,.wsm-list,.wsh-mobile-settings{display:none;}
@media (max-width:720px){
  /* header: the "Workspace" title is back (menu icon, title, then the icons on the right) */
  html body .wsh-mobile-brand-row{justify-content:flex-start !important;gap:2px;}
  html body .wsh-mobile-brand-row .wsh-brand{display:inline-flex !important;align-items:center;margin:0 0 0 2px !important;padding:0 !important;font:600 17px 'Cabinet Grotesk',Arial,sans-serif !important;color:#111 !important;letter-spacing:-.2px;text-decoration:none;}
  html body .wsh-mobile-brand-row .wsh-mobile-brand-actions{margin-left:auto !important;}
  html body .wsh-mobile-brand-actions button[hidden]{display:none !important;}
  html body .wsh-mobile-brand-actions .wsh-mobile-settings{display:grid;order:0;place-items:center;width:38px;height:38px;border:0;background:transparent;color:#111;cursor:pointer;}

  /* All boards / Shared with me / ... : white pills with a grey stroke */
  html body .wsh-mobile-views button{background:#fff !important;border:1px solid #D9DEE2 !important;color:#111 !important;box-shadow:none !important;}
  html body .wsh-mobile-views button.active{background:#fff !important;border-color:#8A949E !important;color:#111 !important;font-weight:700;}
  /* workspace dropdown + create/edit buttons next to it */
  html body .wsh-mobile-workspace-bar select,
  html body .wsh-mobile-workspace-bar button,
  html body #wshMobileEditWorkspace{background:#fff !important;border:1px solid #D9DEE2 !important;color:#111 !important;box-shadow:none !important;}
  html body #wshMobileEditWorkspace{display:inline-grid;place-items:center;}
  html body #wshMobileEditWorkspace[hidden]{display:none !important;}
  html body #wshMobileEditWorkspace svg{display:block;}
  /* search bars: white, faint grey stroke */
  html body .wsh-mobile-search,
  html body .wsh-ab-field{background:#fff !important;border:1px solid #E1E5E8 !important;box-shadow:none !important;}
  html body .wsh-mobile-search input,html body .wsh-ab-field input{background:transparent !important;border:0 !important;box-shadow:none !important;}

  /* the settings page: slides in from the right, covers everything (header + bottom bar) */
  html body #wshSettingsPane{display:none !important;}
  html body #wshSettingsPane.wsm-open{display:flex !important;flex-direction:column;position:fixed;inset:0;z-index:100003;background:#fff;overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);margin:0;padding:0 0 calc(24px + env(safe-area-inset-bottom));}
  html body #wshSettingsPane.wsm-open.wsm-in{transform:translateX(0);}
  body.wsm-lock{overflow:hidden;}
  .wsm-bar{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:2;background:#fff;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid #EEF0F2;}
  .wsm-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#111;cursor:pointer;padding:0;}
  .wsm-title{font:600 17px 'Cabinet Grotesk',Arial,sans-serif;color:#111;}
  /* list of sections */
  #wshSettingsPane.wsm-open .wsm-list{display:flex;flex-direction:column;gap:10px;padding:14px 16px;}
  #wshSettingsPane.wsm-open.wsm-sub .wsm-list{display:none;}
  .wsm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border:0;border-radius:14px;background:#fff;padding:15px 16px;color:#111;cursor:pointer;box-shadow:0 1px 3px rgba(16,24,40,.10),0 2px 8px rgba(16,24,40,.06);}
  .wsm-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .wsm-row b{font:600 15px 'Cabinet Grotesk',Arial,sans-serif;color:#111;}
  .wsm-row small{font:400 12.5px 'Cabinet Grotesk',Arial,sans-serif;color:#5F6B76;}
  .wsm-row svg{flex:none;color:#111;}
  .wsm-row.is-danger b{color:#B42318;}
  /* one section at a time */
  #wshSettingsPane.wsm-open .wsh-settings-title{display:none;}
  #wshSettingsPane.wsm-open .wsh-settings-page{margin:0;padding:14px 16px;}
  #wshSettingsPane.wsm-open .wsh-setting-card{display:none;}
  #wshSettingsPane.wsm-open .wsh-setting-card.wsm-show{display:block;background:#fff !important;border:0;border-radius:14px;box-shadow:0 1px 3px rgba(16,24,40,.10),0 2px 8px rgba(16,24,40,.06);}
  #wshSettingsPane.wsm-open .wsh-settings-grid{display:block;}
  #wshSettingsPane.wsm-open:not(.wsm-sub) .wsh-settings-page{display:none;}
  #wshSettingsPane.wsm-open .wsh-settings-actions{display:none;margin-top:14px;}
  #wshSettingsPane.wsm-open.wsm-sub:not(.wsm-sub-danger) .wsh-settings-actions{display:block;}
  #wshSettingsPane.wsm-open .wsh-setting-card input:not([type=checkbox]),
  #wshSettingsPane.wsm-open .wsh-setting-card textarea,
  #wshSettingsPane.wsm-open .wsh-setting-card select{background:#fff !important;border:1px solid #D9DEE2;}
}