/* 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-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:#fff !important;border:1px solid #E1E5E8 !important;}
}
@media (min-width:721px){
  html body[data-workspace-home] .wsh-topbar .wsh-top-search{background:#fff !important;border:1px solid #E1E5E8 !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;}
}


/* ===== Mobile fixes stage 3 (Workspace) =====
   Title: the rule at the top of this file used to hide it (body[data-workspace-home] made it win); now it is shown, centred.
   No line under the header, no edit pencil, white search bars / cards / members with a faint grey stroke (web + phone). */
:root{--wsh-fill:#fff;--wsh-stroke:#E1E5E8;}
@media (max-width:720px){
  html body .wsh-mobile-brand-row{position:relative;border-bottom:0 !important;box-shadow:none !important;}
  html body .wsh-mobile-brand-row .wsh-brand,
  html body[data-workspace-home] .wsh-mobile-brand-row .wsh-brand,
  html body .wsh-app.is-collapsed .wsh-mobile-brand-row .wsh-brand{display:inline-flex !important;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0 !important;padding:0 !important;font:600 17px 'Cabinet Grotesk',Arial,sans-serif !important;color:#111 !important;pointer-events:none;max-width:50vw;white-space:nowrap;}
  html body .wsh-mobile-brand-row .wsh-brand-mark{display:none !important;}
  html body #wshMobileEditWorkspace{display:none !important;}
}
html body .wsh-ab-field,html body .wsh-mobile-search,html body .wsh-top-search,html body .wsh-topbar .wsh-top-search{background:#fff !important;border:1px solid var(--wsh-stroke) !important;box-shadow:none !important;}
html body .wsh-card,html body .wsh-ab-card,html body .wsh-ab-list,html body .wsh-member-card,html body .wsh-setting-card,html body .wsh-template-card{background:#fff !important;border:1px solid var(--wsh-stroke) !important;}
html body .wsh-ab-card.is-list{margin:5px 8px !important;padding:8px 10px !important;border:1px solid var(--wsh-stroke) !important;border-radius:10px !important;background:#FAFCFB !important;}
html body .wsh-ab-card.is-list:hover{background:#F3F8F6 !important;}
html body .wsh-ab-listhead{background:#fff !important;}

/* Stage 5a: workspace view pills use the same look as the Notifications tabs */
html body .wsh-mobile-views button,
html body[data-workspace-home] .wsh-mobile-views button{height:auto !important;padding:8px 15px !important;border:0 !important;border-radius:10px !important;background:rgba(27,33,45,.06) !important;color:#1B212D !important;font:600 12.5px 'Cabinet Grotesk',sans-serif !important;font-weight:600 !important;box-shadow:none !important;}
html body .wsh-mobile-views button.active,
html body[data-workspace-home] .wsh-mobile-views button.active{background:#e3f1ef !important;color:#0B5850 !important;border:0 !important;font-weight:600 !important;}

/* List view: rows are plain rows inside the one list card (the generic card border/radius used to draw a card around each row) */
html body .wsh-ab-card.is-list{border:0 !important;border-bottom:1px solid #eaeff0 !important;border-radius:0 !important;box-shadow:none !important;background:transparent !important;}
html body .wsh-ab-card.is-list:last-child{border-bottom:0 !important;}
/* Sort dropdown text matches the owner dropdown (phones were enlarging every select to 15px) */
html body .wsh-ab-sort select{font-size:13px !important;}


/* ===== Workspace (phones), punch-list stage 1: no workspace dropdown + plus row; every workspace is its own pill, plus a "Create a workspace" pill ===== */
@media (max-width:720px){
  html body .wsh-mobile-workspace-bar{display:none !important;}
  html body .wsh-mobile-views .wsh-ws-pills{display:contents;}
  html body .wsh-mobile-views .wsh-ws-create-pill{background:#fff !important;box-shadow:inset 0 0 0 1px #D9DEE2 !important;color:#1B212D !important;}
}

/* Web: workspace pills get one even gap, whatever is added (the pills sit in a wrapper span that had no gap of its own), and the Boards / Members tabs sit a little lower */
@media (min-width:721px){
  html body .wsh-mobile-views{gap:12px !important;}
  html body .wsh-mobile-views .wsh-ws-pills{display:contents !important;}
  html body .wsh-main-tabs{margin-top:10px !important;}
}