/* EDIVIC canonical authenticated workspace shell
   Phase 3 design-system + production polish — 2026-07-21
   This file is the single source of truth for authenticated topbar/sidebar positioning. */
:root{
  --edivic-shell-topbar-h:78px;
  --edivic-shell-sidebar-w:276px;
  --edivic-shell-bg:#fff9e8;
  --edivic-shell-surface:rgba(59,42,26,.992);
  --edivic-shell-border:rgba(255,253,245,.16);
  --edivic-shell-ink:#2b2418;
  --edivic-shell-muted:#eadfca;
  --edivic-shell-yellow:#ffbe00;
  --edivic-shell-yellow-soft:#3b341e;
  --edivic-shell-shadow:0 18px 46px rgba(6,18,28,.24);
}

body.edivic-app-shell-active{
  --topbar-h:var(--edivic-shell-topbar-h)!important;
  --topbar-height:var(--edivic-shell-topbar-h)!important;
  --header-height:var(--edivic-shell-topbar-h)!important;
  --top:var(--edivic-shell-topbar-h)!important;
  --sidebar-w:var(--edivic-shell-sidebar-w)!important;
  --sidebar-width:var(--edivic-shell-sidebar-w)!important;
  --side:var(--edivic-shell-sidebar-w)!important;
}

/* Legacy shell remains in the DOM for page-script compatibility, but never paints. */
body.edivic-app-shell-active > header.topbar,
body.edivic-app-shell-active > header.top,
body.edivic-app-shell-active > header.gc-top,
body.edivic-app-shell-active > header.ai-top,
body.edivic-app-shell-active > aside.sidebar,
body.edivic-app-shell-active > .sidebar{
  display:none!important;
}
body.edivic-app-shell-active > .edv-global-menu-btn{display:none!important}

.edivic-app-topbar,
.edivic-app-sidebar,
.edivic-app-drawer-overlay{box-sizing:border-box}
.edivic-app-topbar * , .edivic-app-sidebar *{box-sizing:border-box}

.edivic-app-topbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:10000;
  height:var(--edivic-shell-topbar-h);
  display:grid;
  grid-template-columns:var(--edivic-shell-sidebar-w) minmax(250px,560px) 1fr;
  align-items:center;
  gap:20px;
  padding:0 24px 0 18px;
  background:rgba(255,244,204,.975);
  border-top:3px solid var(--edivic-shell-yellow);
  border-bottom:1px solid var(--edivic-shell-border);
  box-shadow:0 12px 32px rgba(6,18,28,.22);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  color:var(--edivic-shell-ink);
}

.edivic-app-brand{
  display:flex;align-items:center;gap:11px;min-width:0;color:inherit;text-decoration:none;
}
.edivic-app-brand img{width:48px;height:48px;border-radius:14px;object-fit:cover;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.edivic-app-brand-copy{display:grid;line-height:1.08;min-width:0}
.edivic-app-brand-copy strong{font-family:"Fraunces",Georgia,serif;font-size:1.18rem;font-weight:800;letter-spacing:.01em}
.edivic-app-brand-copy span{margin-top:4px;color:var(--edivic-shell-muted);font-size:.64rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}

.edivic-app-search{
  height:46px;display:flex;align-items:center;gap:10px;padding:0 14px;
  border:1px solid var(--edivic-shell-border);border-radius:14px;background:rgba(255,255,255,.075);
}
.edivic-app-search svg{width:18px;height:18px;flex:0 0 auto;color:#c7d2dc}
.edivic-app-search input{width:100%;border:0;outline:0;background:transparent;color:var(--edivic-shell-ink);font:inherit;font-size:.88rem}
.edivic-app-search input::placeholder{color:#756a58}

.edivic-app-top-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.edivic-app-icon-btn,.edivic-app-mobile-menu{
  position:relative;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--edivic-shell-border);border-radius:14px;
  display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--edivic-shell-ink);text-decoration:none;cursor:pointer;
}
.edivic-app-icon-btn:hover,.edivic-app-mobile-menu:hover{border-color:rgba(255,190,0,.72);background:rgba(255,190,0,.10);transform:translateY(-1px)}
.edivic-app-icon-btn svg,.edivic-app-mobile-menu svg{width:19px;height:19px}
.edivic-app-badge{position:absolute;right:-4px;top:-5px;min-width:20px;height:20px;padding:0 5px;border:2px solid #3b2a1a;border-radius:99px;background:var(--edivic-shell-yellow);display:none;place-items:center;color:#231b0b;font-size:.64rem;font-weight:900}
.edivic-app-badge.is-visible{display:grid}

.edivic-app-profile{
  min-width:178px;max-width:238px;height:46px;padding:4px 11px 4px 5px;display:flex;align-items:center;gap:9px;
  border:1px solid var(--edivic-shell-border);border-radius:14px;background:rgba(255,255,255,.07);color:inherit;text-decoration:none;overflow:hidden;
}
.edivic-app-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:11px;overflow:hidden;display:grid;place-items:center;background:var(--edivic-shell-yellow);color:#2b2418;font-size:.78rem;font-weight:900}
.edivic-app-avatar img{width:100%;height:100%;object-fit:cover}
.edivic-app-profile-copy{min-width:0;display:grid;line-height:1.08}
.edivic-app-profile-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
.edivic-app-profile-copy span{margin-top:4px;color:var(--edivic-shell-muted);font-size:.65rem;text-transform:capitalize}
.edivic-app-mobile-menu{display:none}

.edivic-app-sidebar{
  position:fixed!important;
  z-index:9990!important;
  left:0!important;
  top:var(--edivic-shell-topbar-h)!important;
  bottom:0!important;
  width:var(--edivic-shell-sidebar-w)!important;
  height:auto!important;
  padding:18px 14px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow-y:auto!important;
  background:var(--edivic-shell-surface)!important;
  border-right:1px solid var(--edivic-shell-border)!important;
  box-shadow:10px 0 32px rgba(6,18,28,.18)!important;
  transform:none!important;
  transition:transform .28s ease!important;
  color:var(--edivic-shell-ink)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.edivic-app-sidebar-profile{display:flex;align-items:center;gap:11px;padding:13px 12px;margin-bottom:12px;border:1px solid rgba(255,190,0,.18);border-radius:16px;background:linear-gradient(145deg,rgba(255,190,0,.09),rgba(255,255,255,.035))}
.edivic-app-sidebar-profile .edivic-app-avatar{width:42px;height:42px;flex-basis:42px;border-radius:13px}
.edivic-app-sidebar-user{min-width:0;display:grid;line-height:1.1}
.edivic-app-sidebar-user strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}
.edivic-app-sidebar-user span{margin-top:4px;color:var(--edivic-shell-muted);font-size:.68rem;text-transform:capitalize}
.edivic-app-nav-label{margin:10px 10px 7px;color:#d1bd9b;font-size:.63rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.edivic-app-nav{display:grid;gap:4px}
.edivic-app-nav a{
  min-height:44px!important;padding:0 12px!important;display:flex!important;align-items:center!important;gap:11px!important;
  border-radius:13px!important;color:var(--edivic-shell-ink)!important;text-decoration:none!important;font-size:.82rem!important;font-weight:750!important;
  background:transparent!important;border:0!important;
}
.edivic-app-nav a svg{width:18px;height:18px;flex:0 0 18px;color:#dbcaa9}
.edivic-app-nav a:hover{background:rgba(255,255,255,.075)!important;color:#fffdf5!important}
.edivic-app-nav a.is-active{background:linear-gradient(135deg,#ffbe00,#ffd45a)!important;color:#2b2418!important;box-shadow:0 9px 22px rgba(255,190,0,.20)!important}
.edivic-app-nav a.is-active svg{color:#2b2418}
.edivic-app-sidebar-footer{margin-top:auto;padding-top:15px;border-top:1px solid var(--edivic-shell-border);display:grid;gap:5px}
.edivic-app-sidebar-footer a,.edivic-app-sidebar-footer button{
  width:100%;min-height:40px;padding:0 11px;border:0;border-radius:12px;background:transparent;color:var(--edivic-shell-muted);
  display:flex;align-items:center;gap:10px;text-decoration:none;font:inherit;font-size:.76rem;font-weight:750;cursor:pointer;text-align:left;
}
.edivic-app-sidebar-footer a:hover,.edivic-app-sidebar-footer button:hover{background:rgba(255,255,255,.075);color:#fffdf5}
.edivic-app-sidebar-footer svg{width:17px;height:17px;flex:0 0 17px}

.edivic-app-drawer-overlay{display:none;position:fixed;inset:var(--edivic-shell-topbar-h) 0 0 0;z-index:9980;background:rgba(43,28,16,.58);backdrop-filter:blur(2px)}

/* Canonical desktop content offset. App shell owns the reserved space. */
body.edivic-app-shell-active .edivic-shell-content{
  box-sizing:border-box!important;
}
body.edivic-app-shell-active[data-edivic-shell-page="client-dashboard.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="editor-dashboard.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="postproject.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="pricing.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="settings.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="notifications.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="messages.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="client-message.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="editor-message.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="editor-profile.html"] .edivic-shell-content{
  margin-left:var(--edivic-shell-sidebar-w)!important;
  width:auto!important;
}
body.edivic-app-shell-active[data-edivic-shell-page="browse-briefs.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="browse-editors.html"] .edivic-shell-content{
  margin-left:var(--edivic-shell-sidebar-w)!important;
  margin-right:0!important;
  width:auto!important;
  max-width:none!important;
  padding-left:clamp(18px,2.4vw,34px)!important;
  padding-right:clamp(18px,2.4vw,34px)!important;
  padding-top:calc(var(--edivic-shell-topbar-h) + 26px)!important;
}
body.edivic-app-shell-active[data-edivic-shell-page="active-projects.html"] .edivic-shell-content{
  margin-left:0!important;
  width:auto!important;
  max-width:none!important;
  padding-left:calc(var(--edivic-shell-sidebar-w) + 28px)!important;
  padding-top:calc(var(--edivic-shell-topbar-h) + 26px)!important;
}
body.edivic-app-shell-active[data-edivic-shell-page="project-details.html"] .edivic-shell-content{
  margin-left:var(--edivic-shell-sidebar-w)!important;
  width:auto!important;
  max-width:none!important;
  padding-top:var(--edivic-shell-topbar-h)!important;
}
body.edivic-app-shell-active[data-edivic-shell-page="browse-clients.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="project-management.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="project-contract.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="project-payments.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="ai-center.html"] .edivic-shell-content{
  box-sizing:border-box!important;
  width:auto!important;
  max-width:none!important;
  margin-left:var(--edivic-shell-sidebar-w)!important;
  margin-right:0!important;
  padding-top:calc(var(--edivic-shell-topbar-h) + 28px)!important;
  padding-left:clamp(18px,3vw,42px)!important;
  padding-right:clamp(18px,3vw,42px)!important;
}
body.edivic-app-shell-active[data-edivic-shell-page="project-contract.html"] .edivic-shell-content{margin-top:0!important;margin-bottom:42px!important}
body.edivic-app-shell-active[data-edivic-shell-page="project-management.html"] .edivic-shell-content,
body.edivic-app-shell-active[data-edivic-shell-page="project-payments.html"] .edivic-shell-content{margin-top:0!important;margin-bottom:60px!important}
body.edivic-app-shell-active[data-edivic-shell-page="browse-clients.html"] .edivic-shell-content{margin-top:0!important;margin-bottom:50px!important}

@media(max-width:1180px){
  .edivic-app-topbar{grid-template-columns:var(--edivic-shell-sidebar-w) minmax(220px,1fr) auto;gap:12px;padding-right:14px}
  .edivic-app-profile{min-width:46px;width:46px;padding:4px}.edivic-app-profile-copy{display:none}
}

@media(max-width:1100px){
  :root{--edivic-shell-topbar-h:70px;--edivic-shell-sidebar-w:288px}
  .edivic-app-topbar{grid-template-columns:auto minmax(120px,1fr) auto;height:var(--edivic-shell-topbar-h);padding:0 12px;gap:10px}
  .edivic-app-brand-copy span{display:none}.edivic-app-brand img{width:43px;height:43px}.edivic-app-brand-copy strong{font-size:1.02rem}
  .edivic-app-search{height:42px}
  .edivic-app-profile{display:none}.edivic-app-mobile-menu{display:grid}
  .edivic-app-sidebar{width:min(var(--edivic-shell-sidebar-w),88vw)!important;transform:translateX(-105%)!important;box-shadow:24px 0 58px rgba(43,28,16,.34)!important}
  body.edivic-app-shell-active.edivic-shell-drawer-open .edivic-app-sidebar{transform:translateX(0)!important}
  body.edivic-app-shell-active.edivic-shell-drawer-open .edivic-app-drawer-overlay{display:block}
  body.edivic-app-shell-active .edivic-shell-content{
    margin-left:0!important;
    width:auto!important;
    max-width:none!important;
  }
  body.edivic-app-shell-active[data-edivic-shell-page="active-projects.html"] .edivic-shell-content{padding-left:18px!important;padding-right:18px!important;padding-top:calc(var(--edivic-shell-topbar-h) + 20px)!important}
  body.edivic-app-shell-active[data-edivic-shell-page="browse-briefs.html"] .edivic-shell-content,
  body.edivic-app-shell-active[data-edivic-shell-page="browse-editors.html"] .edivic-shell-content{padding-top:calc(var(--edivic-shell-topbar-h) + 20px)!important}
  body.edivic-app-shell-active[data-edivic-shell-page="project-details.html"] .edivic-shell-content{padding-top:var(--edivic-shell-topbar-h)!important}
  body.edivic-app-shell-active[data-edivic-shell-page="browse-clients.html"] .edivic-shell-content,
  body.edivic-app-shell-active[data-edivic-shell-page="project-management.html"] .edivic-shell-content,
  body.edivic-app-shell-active[data-edivic-shell-page="project-contract.html"] .edivic-shell-content,
  body.edivic-app-shell-active[data-edivic-shell-page="project-payments.html"] .edivic-shell-content,
    body.edivic-app-shell-active[data-edivic-shell-page="ai-center.html"] .edivic-shell-content{padding-top:calc(var(--edivic-shell-topbar-h) + 22px)!important;padding-left:16px!important;padding-right:16px!important}
}

@media(max-width:680px){
  .edivic-app-topbar{grid-template-columns:auto 1fr auto}
  .edivic-app-search{display:none}
  .edivic-app-top-actions{gap:6px}.edivic-app-icon-btn{width:42px;height:42px;flex-basis:42px}
  .edivic-app-brand-copy{display:none}
}

@media(prefers-reduced-motion:reduce){.edivic-app-sidebar,.edivic-app-icon-btn{transition:none!important}}

/* Loading states previously owned by the retired workspace QA layer. */
.edv-skeleton-wrap{display:grid;gap:14px;padding:18px 0}
.edv-skeleton-card{height:92px;border:1px solid rgba(43,36,24,.1);border-radius:18px;background:linear-gradient(90deg,#f4efe5 20%,#fffaf0 36%,#f4efe5 52%);background-size:240% 100%;animation:edvShellShimmer 1.2s linear infinite}
.edv-skeleton-card:nth-child(2){height:108px}.edv-skeleton-card:nth-child(4){height:76px}
@keyframes edvShellShimmer{to{background-position:-240% 0}}
@media(prefers-reduced-motion:reduce){.edv-skeleton-card{animation:none}}
/* Phase 2 directory compatibility */
body[data-edivic-shell-page="browse-clients.html"] .client .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.edivic-legacy-shell-bridge{display:none!important}


/* Phase 4 shell regression hardening */
body.edivic-app-shell-active{overflow-x:clip}
body.edivic-app-shell-active.edivic-shell-drawer-open{overflow:hidden}
.edivic-app-topbar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.edivic-app-sidebar{padding-bottom:max(16px,env(safe-area-inset-bottom))!important;overscroll-behavior:contain}
.edivic-app-drawer-overlay{touch-action:none}
.edivic-app-top-actions,.edivic-app-search,.edivic-app-brand{min-width:0}
body.edivic-app-shell-active .edivic-shell-content{min-width:0!important;overflow-x:clip}

@media(max-width:1100px){
  .edivic-app-topbar{grid-template-columns:auto minmax(0,1fr) auto}
  .edivic-app-sidebar{height:calc(100dvh - var(--edivic-shell-topbar-h))!important}
}
@media(max-width:680px){
  .edivic-app-topbar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));gap:7px}
  .edivic-app-top-actions{gap:5px}
}
@media(max-width:430px){
  .edivic-app-top-actions>.edivic-app-icon-btn:first-of-type{display:none}
  .edivic-app-icon-btn,.edivic-app-mobile-menu{width:40px;height:40px;flex-basis:40px;border-radius:12px}
  .edivic-app-brand img{width:40px;height:40px;border-radius:12px}
}


/* Phase 4.1 — recording-based runtime mobile shell guard
   Real-device recordings showed legacy page CSS could restore a desktop sidebar offset
   after async authentication/data hydration. The canonical shell must always win. */
@media(max-width:1100px){
  html,body{width:100%;max-width:100%;overflow-x:clip!important}
  body.edivic-app-shell-active.edivic-shell-mobile-normalized .edivic-shell-content{
    box-sizing:border-box!important;
    margin-left:0!important;
    margin-right:0!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.edivic-app-shell-active.edivic-shell-mobile-normalized .edivic-shell-content > *{
    min-width:0;
    max-width:100%;
  }
}

/* 2026-07-22 final Barley/Brown shell contrast contract */
.edivic-app-topbar{border-bottom-color:rgba(59,42,26,.16);box-shadow:0 12px 32px rgba(59,42,26,.12)}
.edivic-app-topbar .edivic-app-brand-copy span,
.edivic-app-topbar .edivic-app-profile-copy span{color:#756a58}
.edivic-app-search{background:#fffdf5;border-color:#d9c49e}
.edivic-app-search svg,.edivic-app-search input::placeholder{color:#756a58}
.edivic-app-icon-btn,.edivic-app-mobile-menu,.edivic-app-profile{background:#fffdf5;border-color:#d9c49e;color:#3b2a1a}
.edivic-app-icon-btn:hover,.edivic-app-mobile-menu:hover,.edivic-app-profile:hover{background:#fff4cc;border-color:#c79200;color:#2b1c10}
.edivic-app-sidebar{background:#3b2a1a!important;color:#fffdf5!important;border-right-color:rgba(43,28,16,.30)!important;box-shadow:10px 0 32px rgba(59,42,26,.18)!important}
.edivic-app-sidebar-user strong{color:#fffdf5}
.edivic-app-sidebar-user span,.edivic-app-sidebar-footer a,.edivic-app-sidebar-footer button{color:#eadfca}
.edivic-app-nav-label{color:#d1bd9b}
.edivic-app-nav a{color:#fffdf5!important}
.edivic-app-nav a svg{color:#dbcaa9}
.edivic-app-nav a:hover{background:rgba(255,190,0,.14)!important;color:#fffdf5!important}
.edivic-app-sidebar-footer a:hover,.edivic-app-sidebar-footer button:hover{background:rgba(255,190,0,.14);color:#fffdf5}
.edivic-app-sidebar-profile{background:linear-gradient(145deg,rgba(255,190,0,.13),rgba(255,253,245,.04));border-color:rgba(255,190,0,.25)}
.edv-skeleton-card{background:linear-gradient(90deg,#f4ead7 20%,#fffaf0 36%,#f4ead7 52%)}