/* EDIVIC Design System v1 — Phase 3 production visual polish
   Barley white + Mikado yellow with a deep editorial navy workspace shell.
   Shared tokens and reusable component primitives. */
:root{
  --edv-bg:#f8f4eb;
  --edv-bg-soft:#fffaf0;
  --edv-surface:#fffdf9;
  --edv-surface-2:#fff7dd;
  --edv-surface-3:#f3ede2;
  --edv-ink:#2b2418;
  --edv-ink-soft:#5e5545;
  --edv-muted:#746e64;
  --edv-subtle:#968f84;
  --edv-line:#e6ded0;
  --edv-line-strong:#d7ccba;
  --edv-navy:#3b2a1a;
  --edv-navy-2:#4a321f;
  --edv-navy-3:#4a3522;
  --edv-yellow:#ffbe00;
  --edv-yellow-hover:#e9aa00;
  --edv-yellow-soft:#fff0b8;
  --edv-success:#18794e;
  --edv-success-soft:#eaf8f1;
  --edv-warning:#9a6500;
  --edv-warning-soft:#fff6d6;
  --edv-danger:#b42318;
  --edv-danger-soft:#fff0ee;
  --edv-info:#8a5a1f;
  --edv-info-soft:#edf5ff;

  --edv-font-sans:"Outfit",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --edv-font-display:"Fraunces",Georgia,serif;

  --edv-radius-xs:8px;
  --edv-radius-sm:12px;
  --edv-radius-md:16px;
  --edv-radius-lg:20px;
  --edv-radius-xl:26px;
  --edv-radius-pill:999px;

  --edv-shadow-xs:0 1px 2px rgba(31,37,42,.04);
  --edv-shadow-sm:0 8px 24px rgba(35,39,42,.055);
  --edv-shadow-md:0 16px 42px rgba(29,35,41,.08);
  --edv-shadow-lg:0 28px 70px rgba(18,37,54,.14);

  --edv-space-1:4px;
  --edv-space-2:8px;
  --edv-space-3:12px;
  --edv-space-4:16px;
  --edv-space-5:20px;
  --edv-space-6:24px;
  --edv-space-7:32px;
  --edv-space-8:40px;
  --edv-space-9:48px;
  --edv-space-10:64px;

  --edv-control-h:46px;
  --edv-transition:160ms cubic-bezier(.2,.75,.3,1);
}

html{color-scheme:light;scroll-behavior:smooth}
body{font-family:var(--edv-font-sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--edv-yellow);color:#2b2418}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(255,190,0,.58);
  outline-offset:3px;
}
button,input,select,textarea{font:inherit}
button,[role="button"],a{-webkit-tap-highlight-color:transparent}
img,svg,video{max-width:100%}

/* Authenticated workspace canvas */
body.edivic-app-shell-active{
  margin:0;
  color:var(--edv-ink);
  background:
    radial-gradient(circle at 94% 0%,rgba(255,190,0,.10),transparent 30rem),
    linear-gradient(180deg,#fbf8f2 0%,var(--edv-bg) 100%);
}
body.edivic-app-shell-active .edivic-shell-content{
  min-height:100vh;
  color:var(--edv-ink);
}
body.edivic-app-shell-active .edivic-shell-content :is(h1,h2,h3){
  color:var(--edv-ink);
  text-wrap:balance;
}
body.edivic-app-shell-active .edivic-shell-content h1{
  font-family:var(--edv-font-display);
  letter-spacing:-.035em;
  line-height:1.05;
}
body.edivic-app-shell-active .edivic-shell-content :is(h2,h3){letter-spacing:-.022em}
body.edivic-app-shell-active .edivic-shell-content :is(p,.muted,.subtext,.helper,.field-help){color:var(--edv-muted)}

/* Editorial labels */
body.edivic-app-shell-active :is(.eyebrow,.section-tag,.kicker,.nav-label,.filter-label){
  font-family:var(--edv-font-sans);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
body.edivic-app-shell-active :is(.eyebrow,.section-tag,.kicker){color:#806000}

/* Shared surfaces */
body.edivic-app-shell-active :is(
  .panel,.card,.content-card,.metric-card,.stats-card,.stat-card,.project-card,.editor-card,.client-card,
  .gc-card,.form-card,.section-card,.info-card,.profile-card,.receipt-box,.notice-card,.summary-card
){
  border:1px solid var(--edv-line);
  border-radius:var(--edv-radius-lg);
  background:rgba(255,253,249,.96);
  box-shadow:var(--edv-shadow-sm);
}
body.edivic-app-shell-active :is(.panel,.card,.gc-card,.project-card,.editor-card,.client-card){
  transition:border-color var(--edv-transition),box-shadow var(--edv-transition),transform var(--edv-transition);
}
body.edivic-app-shell-active :is(.project-card,.editor-card,.client-card):hover{
  border-color:#dacda7;
  box-shadow:var(--edv-shadow-md);
  transform:translateY(-2px);
}
body.edivic-app-shell-active :is(.panel-head,.panel-header,.card-head,.section-heading){
  border-bottom-color:var(--edv-line);
}
body.edivic-app-shell-active :is(.panel-title,.panel-head h2,.panel-header h2,.card-head h2,.section-heading h2){
  color:var(--edv-ink);
}

/* Metric surfaces */
body.edivic-app-shell-active :is(.metric-card,.stat-card,.hero-stat,.metric){
  background:linear-gradient(145deg,#fffdf9 0%,#fff9e8 100%);
}
body.edivic-app-shell-active :is(.metric-icon,.stat-icon,.empty-state-icon,.empty-icon,.modal-icon){
  border-radius:var(--edv-radius-md);
}

/* Buttons */
body.edivic-app-shell-active :is(.btn,.primary-button,.secondary-button,.action-btn,.quick-action,.page-btn){
  min-height:44px;
  border-radius:var(--edv-radius-sm);
  font-family:var(--edv-font-sans);
  font-weight:750;
  letter-spacing:.002em;
  transition:transform var(--edv-transition),box-shadow var(--edv-transition),background-color var(--edv-transition),border-color var(--edv-transition),color var(--edv-transition);
}
body.edivic-app-shell-active :is(.btn,.primary-button,.secondary-button,.action-btn,.quick-action):not(:disabled):hover{transform:translateY(-1px)}
body.edivic-app-shell-active :is(.btn-primary,.primary-button){
  border-color:var(--edv-yellow);
  background:var(--edv-yellow);
  color:#2b2418;
  box-shadow:0 9px 22px rgba(255,190,0,.18);
}
body.edivic-app-shell-active :is(.btn-primary,.primary-button):not(:disabled):hover{
  border-color:var(--edv-yellow-hover);
  background:var(--edv-yellow-hover);
  box-shadow:0 12px 28px rgba(233,170,0,.22);
}
body.edivic-app-shell-active :is(.btn-dark){background:var(--edv-navy);border-color:var(--edv-navy);color:#fff}
body.edivic-app-shell-active :is(.btn-dark):not(:disabled):hover{background:var(--edv-navy-2);border-color:var(--edv-navy-2)}
body.edivic-app-shell-active :is(.btn-light,.secondary-button){background:#fff;border-color:var(--edv-line-strong);color:var(--edv-ink)}
body.edivic-app-shell-active :is(.btn-light,.secondary-button):not(:disabled):hover{background:var(--edv-surface-2);border-color:#d8c586}
body.edivic-app-shell-active .btn-success{background:var(--edv-success);border-color:var(--edv-success);color:#fff}
body.edivic-app-shell-active .btn-danger{background:var(--edv-danger);border-color:var(--edv-danger);color:#fff}
body.edivic-app-shell-active :is(button,.btn)[disabled],
body.edivic-app-shell-active [aria-disabled="true"]{opacity:.52;cursor:not-allowed;transform:none}

/* Form controls */
body.edivic-app-shell-active :is(.field,.gc-field){gap:7px}
body.edivic-app-shell-active :is(.field label,.gc-field label,.filter-label){color:var(--edv-ink-soft);font-weight:750}
body.edivic-app-shell-active :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  border-color:var(--edv-line-strong);
  border-radius:var(--edv-radius-sm);
  background:#fff;
  color:var(--edv-ink);
  box-shadow:var(--edv-shadow-xs);
  transition:border-color var(--edv-transition),box-shadow var(--edv-transition),background-color var(--edv-transition);
}
body.edivic-app-shell-active :is(input:not([type="checkbox"]):not([type="radio"]),select){min-height:var(--edv-control-h)}
body.edivic-app-shell-active textarea{min-height:110px;line-height:1.55}
body.edivic-app-shell-active :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):hover{border-color:#cfc1aa}
body.edivic-app-shell-active :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus{
  border-color:#d6a500;
  box-shadow:0 0 0 4px rgba(255,190,0,.13);
  outline:none;
}
body.edivic-app-shell-active :is(input,textarea)::placeholder{color:#9b9388}

/* Chips, tabs and statuses */
body.edivic-app-shell-active :is(.skill-chip,.category-chip,.chip,.tag,.filter-tab,.status-pill){
  border-radius:var(--edv-radius-pill);
}
body.edivic-app-shell-active :is(.skill-chip,.category-chip,.chip,.tag){border-color:var(--edv-line);background:#fff9e8;color:var(--edv-ink-soft)}
body.edivic-app-shell-active .filter-tab{transition:background-color var(--edv-transition),color var(--edv-transition),border-color var(--edv-transition)}
body.edivic-app-shell-active :is(.filter-tab.active,.filter-tab[aria-selected="true"]){background:var(--edv-navy);border-color:var(--edv-navy);color:#fff}
body.edivic-app-shell-active :is(.status-pill.success,.status-success,.status.completed){background:var(--edv-success-soft);color:var(--edv-success);border-color:#bde6d0}
body.edivic-app-shell-active :is(.status-pill.warning,.status-warning,.status.pending){background:var(--edv-warning-soft);color:var(--edv-warning);border-color:#eddca3}
body.edivic-app-shell-active :is(.status-pill.danger,.status-danger,.status.rejected){background:var(--edv-danger-soft);color:var(--edv-danger);border-color:#f1c5bf}

/* Tables */
body.edivic-app-shell-active table{border-collapse:separate;border-spacing:0;width:100%;color:var(--edv-ink)}
body.edivic-app-shell-active thead th{
  background:#f7f2e8;
  color:#5d554a;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.edivic-app-shell-active :is(th,td){border-bottom-color:var(--edv-line)}
body.edivic-app-shell-active tbody tr{transition:background-color var(--edv-transition)}
body.edivic-app-shell-active tbody tr:hover{background:#fffaf0}

/* Empty and loading states */
body.edivic-app-shell-active :is(.empty-state,.empty){
  border-color:var(--edv-line);
  border-radius:var(--edv-radius-lg);
  background:linear-gradient(145deg,#fffdf9,#fff9eb);
}
body.edivic-app-shell-active :is(.empty-state h3,.empty h3){color:var(--edv-ink)}
body.edivic-app-shell-active .edv-skeleton-card{
  border-color:var(--edv-line);
  background:linear-gradient(90deg,#eee7dc 20%,#fffaf0 36%,#eee7dc 52%);
}

/* Modals */
body.edivic-app-shell-active .modal{backdrop-filter:blur(5px)}
body.edivic-app-shell-active .modal-card{
  border:1px solid var(--edv-line);
  border-radius:var(--edv-radius-xl);
  background:var(--edv-surface);
  box-shadow:var(--edv-shadow-lg);
}
body.edivic-app-shell-active .modal-head{border-bottom-color:var(--edv-line)}
body.edivic-app-shell-active .modal-actions{border-top-color:var(--edv-line)}

/* Toasts/notices */
body.edivic-app-shell-active :is(.toast,.notice,.edivic-degraded-note){border-radius:var(--edv-radius-md);box-shadow:var(--edv-shadow-md)}
body.edivic-app-shell-active .notice{border-color:var(--edv-line)}

/* Consistent scrollbar inside application workspace */
body.edivic-app-shell-active *{scrollbar-width:thin;scrollbar-color:#c9b980 transparent}
body.edivic-app-shell-active *::-webkit-scrollbar{width:9px;height:9px}
body.edivic-app-shell-active *::-webkit-scrollbar-track{background:transparent}
body.edivic-app-shell-active *::-webkit-scrollbar-thumb{background:#c9b980;border:2px solid transparent;background-clip:padding-box;border-radius:999px}

/* Public/auth surfaces get the same control language without overriding their bespoke layouts. */
body:not(.edivic-app-shell-active) :is(button,.btn,input,select,textarea){font-family:var(--edv-font-sans)}
body:not(.edivic-app-shell-active) :is(.btn,.primary-button,.secondary-button){border-radius:var(--edv-radius-sm)}
body:not(.edivic-app-shell-active) :is(.auth-card,.login-card,.register-card,.legal-card){border-radius:var(--edv-radius-xl)}

@media(max-width:760px){
  :root{--edv-control-h:44px}
  body.edivic-app-shell-active :is(.panel,.card,.content-card,.metric-card,.stats-card,.stat-card,.project-card,.editor-card,.client-card,.gc-card){border-radius:18px}
  body.edivic-app-shell-active .modal-card{border-radius:20px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.edivic-app-shell-active *,body.edivic-app-shell-active *::before,body.edivic-app-shell-active *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* --------------------------------------------------------------------------
   Phase 4 — responsive regression hardening
   Canonical cross-page rules for desktop, tablet and mobile production use.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
body{min-width:0;overscroll-behavior-x:none}
:where(main,section,article,aside,nav,header,footer,form,fieldset,div){min-width:0}
:where(img,picture,video,canvas,iframe){max-width:100%;height:auto}
:where(input,select,textarea,button){max-width:100%;min-width:0}
:where(p,li,dd,td,th,label,small,strong,span,a){overflow-wrap:anywhere}
:where(.grid,.layout,.workspace,.content-grid,.dashboard-grid,.page-grid,.form-grid,.gc-grid,.gc-fields,.metrics,.metric-grid) > *{min-width:0}
:where(.actions,.hero-actions,.card-actions,.modal-actions,.toolbar,.top-actions,.project-actions,.proposal-actions){max-width:100%}



/* Preserve contrast inside known dark editorial hero surfaces. */
body[data-edivic-shell-page="browse-briefs.html"] .hero :is(h1,h2,h3),
body[data-edivic-shell-page="browse-clients.html"] .hero :is(h1,h2,h3),
body[data-edivic-shell-page="settings.html"] .hero :is(h1,h2,h3),
body[data-edivic-shell-page="browse-briefs.html"] .hero p,
body[data-edivic-shell-page="browse-clients.html"] .hero p,
body[data-edivic-shell-page="settings.html"] .hero p,
body[data-edivic-shell-page="browse-briefs.html"] .hero :is(.eyebrow,.section-tag,.kicker),
body[data-edivic-shell-page="browse-clients.html"] .hero :is(.eyebrow,.section-tag,.kicker),
body[data-edivic-shell-page="settings.html"] .hero :is(.eyebrow,.section-tag,.kicker),
/* Scroll dense controls instead of allowing them to widen the viewport. */
body.edivic-app-shell-active :is(.tabs,.filter-tabs,.gc-tabs,.ai-tabs,.category-tabs,.status-tabs){
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
body.edivic-app-shell-active :is(.tabs,.filter-tabs,.gc-tabs,.ai-tabs,.category-tabs,.status-tabs) > *{flex:0 0 auto}

/* App-shell generated table scroller. */
.edivic-table-scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:inherit}
.edivic-table-scroll>table{min-width:max-content}
@media(min-width:761px){.edivic-table-scroll>table{min-width:100%}}

/* Keep dynamic cards and long marketplace content inside their columns. */
body.edivic-app-shell-active :is(.panel,.card,.content-card,.project-card,.editor-card,.client-card,.gc-card,.notification,.proposal,.milestone,.row,.list-item){min-width:0;max-width:100%}
body.edivic-app-shell-active :is(.panel,.card,.project-card,.editor-card,.client-card) :is(a,p,span,strong,small,code){overflow-wrap:anywhere}
body.edivic-app-shell-active code{white-space:normal;word-break:break-word}

/* Directory page was the only major workspace page without native responsive rules. */
body[data-edivic-shell-page="browse-clients.html"] .search{align-items:stretch}
body[data-edivic-shell-page="browse-clients.html"] .search input{min-width:0}
body[data-edivic-shell-page="browse-clients.html"] .grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
body[data-edivic-shell-page="browse-clients.html"] .client{min-width:0}
body[data-edivic-shell-page="browse-clients.html"] .empty{grid-column:1/-1}

/* Project workspace sticky controls must sit below the canonical topbar. */
body[data-edivic-shell-page="project-management.html"] .tabs,
/* Prevent full-height chat from creating a second page scrollbar. */
body[data-edivic-shell-page="messages.html"] .workspace{max-width:100%;height:calc(100dvh - var(--edivic-shell-topbar-h) - 40px);min-height:min(620px,calc(100dvh - var(--edivic-shell-topbar-h) - 24px))}

/* Common responsive dialog safety. */
body.edivic-app-shell-active :is(dialog,.modal-card){max-width:min(100% - 24px,760px)}
body.edivic-app-shell-active dialog .modal{max-width:100%}

@media(max-width:1100px){
  body.edivic-app-shell-active .edivic-shell-content{min-width:0!important;max-width:none!important}
  body[data-edivic-shell-page="messages.html"] .workspace{height:calc(100dvh - var(--edivic-shell-topbar-h) - 28px)}
}

@media(max-width:760px){
  body.edivic-app-shell-active{background:linear-gradient(180deg,#fbf8f2 0%,#f7f1e7 100%)}
  body.edivic-app-shell-active .edivic-shell-content :is(h1){text-wrap:pretty}
  body.edivic-app-shell-active :is(.hero,.page-head,.content-grid,.dashboard-grid,.workspace,.layout,.grid,.gc-hero,.gc-grid,.gc-fields,.metrics,.metric-grid){max-width:100%}
  body.edivic-app-shell-active :is(.actions,.hero-actions,.card-actions,.modal-actions,.toolbar,.project-actions,.proposal-actions){gap:8px}
  body.edivic-app-shell-active :is(.btn,.primary-button,.secondary-button,.action-btn,.quick-action,.page-btn){min-height:44px}
  body.edivic-app-shell-active :is(.panel,.card,.content-card,.project-card,.editor-card,.client-card,.gc-card){box-shadow:0 8px 24px rgba(29,35,41,.055)}
  body.edivic-app-shell-active :is(.modal,.modal-card,dialog){max-height:calc(100dvh - 20px)}
  body.edivic-app-shell-active :is(.modal-card,dialog .modal){overflow:auto;-webkit-overflow-scrolling:touch}
  body[data-edivic-shell-page="browse-clients.html"] .hero{padding:24px 20px;border-radius:20px}
  body[data-edivic-shell-page="browse-clients.html"] .search{flex-direction:column;gap:9px}
  body[data-edivic-shell-page="browse-clients.html"] .search .btn{width:100%;justify-content:center}
  body[data-edivic-shell-page="browse-clients.html"] .wrap{padding-left:14px;padding-right:14px}
  body[data-edivic-shell-page="project-management.html"] .compare-bar{align-items:stretch;flex-direction:column}
  body[data-edivic-shell-page="project-management.html"] .compare-bar .btn{width:100%}
  body[data-edivic-shell-page="notifications.html"] .notification{min-width:0}
}

@media(max-width:520px){
  body.edivic-app-shell-active :is(.hero,.panel,.card,.content-card,.project-card,.editor-card,.client-card,.gc-card){border-radius:17px}
  body.edivic-app-shell-active :is(.hero-actions,.card-actions,.actions,.proposal-actions,.milestone-actions,.modal-actions){align-items:stretch}
  body.edivic-app-shell-active :is(.hero-actions,.card-actions,.actions,.proposal-actions,.milestone-actions,.modal-actions) > :is(.btn,button,a.btn){flex:1 1 100%;width:100%}
  body.edivic-app-shell-active :is(.summary-row,.compare-row,.total-check){gap:6px;flex-wrap:wrap}
  body.edivic-app-shell-active :is(.summary-row,.compare-row,.total-check) strong{margin-left:auto;text-align:right}
  body[data-edivic-shell-page="messages.html"] .workspace{height:calc(100dvh - var(--edivic-shell-topbar-h) - 16px);min-height:0;border-radius:16px}
}

@supports(padding:max(0px)){
  body.edivic-app-shell-active .edivic-shell-content{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}