/* Codex isolated UX layer shared by every page in this workspace. */

:root{
  --cx-focus:#075ee6;
  --cx-action:#1769e0;
  --cx-action-soft:#eef5ff;
  --cx-line:#dce5f1;
  --cx-shadow:0 10px 28px rgba(29,55,91,.08);
}

html{scroll-behavior:smooth}
body.codex-ux{overflow-x:hidden}
body.codex-ux :where(button,a,input,select,textarea,[role="button"],[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--cx-focus) 72%,white);
  outline-offset:3px;
}
body.codex-ux :where(button,a,input,select,textarea){font:inherit}
body.codex-ux :where(button,[role="button"],a){-webkit-tap-highlight-color:transparent}
body.codex-ux [data-codex-invalid]{
  color:#8a3b00!important;
  background:#fff4df;
  border-radius:5px;
  padding-inline:4px;
}

/* One-second hierarchy: the daily action area is always the strongest work surface. */
body.codex-ux [data-component="ActionCenter"]{
  position:relative;
  border-color:#cadbf3;
  box-shadow:var(--cx-shadow);
}
body.codex-ux [data-component="ActionCenter"]::after{
  content:"";
  position:absolute;
  inset-block:14px;
  inset-inline-start:0;
  width:4px;
  border-radius:4px;
  background:var(--cx-action);
}
body.codex-ux [data-component="ActionCenter"] :where(button,.v-act){min-height:44px}
body.codex-ux .v-card,
body.codex-ux .v-tablecard{border-color:var(--cx-line)}
body.codex-ux .v-card__head h3,
body.codex-ux .v-tablecard__title h3{letter-spacing:-.01em}
body.codex-ux .v-card__sub{line-height:1.55}
body.codex-ux :where(.v-btn,.v-chip,.v-tab,.v-top__btn,.v-iconbtn,.v-carousel__btn,.v-link){min-height:44px}
body.codex-ux :where(.v-x,.v-datepill__nav){min-width:44px;min-height:44px}
body.codex-ux .v-table tbody tr{transition:background-color .14s ease,box-shadow .14s ease}
body.codex-ux .v-table tbody tr:hover{background:#f7faff}
body.codex-ux .v-empty{border-radius:14px}
body.codex-ux button.v-quality__item{
  width:100%;
  border:0;
  color:inherit;
  text-align:inherit;
  font:inherit;
  cursor:pointer;
}
body.codex-ux button.v-quality__item:hover{background:#f3f7fd}

@media (min-width:901px){
  body.codex-ux .v-cover{height:calc(168px + var(--v-top))}
  body.codex-ux .v-cover__title{font-size:40px}
}

/* CRM: remove the visually unused column and give every zone a clear job. */
@media (min-width:1181px){
  body.codex-ux[data-codex-page="crm"] .v-crmgrid{
    grid-template-columns:minmax(0,1fr) 260px;
    gap:18px;
  }
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__tasks{grid-column:1 / -1;grid-row:1}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__lists{grid-column:2;grid-row:2}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__main{grid-column:1;grid-row:2}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__panel{grid-column:1 / -1;grid-row:3;position:static}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__panel>.v-col{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;align-items:start}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__charts{grid-column:1 / -1;grid-row:4}
  body.codex-ux[data-codex-page="crm"] .v-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
body.codex-ux[data-codex-page="crm"] .v-crmscope{
  align-items:center;
  justify-content:flex-start;
  padding:6px;
  border:1px solid var(--cx-line);
  border-radius:14px;
  background:#fff;
  width:max-content;
  max-width:100%;
}
body.codex-ux[data-codex-page="crm"] .v-crmscope button{min-height:44px}
body.codex-ux[data-codex-page="crm"] .v-crmgrid__main .v-tablecard{
  box-shadow:0 7px 22px rgba(29,55,91,.05);
}
body.codex-ux[data-codex-page="crm"] .v-quick button{min-height:44px}
body.codex-ux[data-codex-page="crm"] .crm-timebar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 0;padding:12px 16px;background:#fff;border:1px solid var(--cx-line);border-radius:16px;box-shadow:0 6px 20px rgba(29,55,91,.04)}
body.codex-ux[data-codex-page="crm"] .crm-timebar__copy{display:flex;flex-direction:column;gap:2px;min-width:150px}
body.codex-ux[data-codex-page="crm"] .crm-timebar__copy b{font-size:14px;color:var(--cx-ink)}
body.codex-ux[data-codex-page="crm"] .crm-timebar__copy span{font-size:12px;color:var(--cx-muted)}
body.codex-ux[data-codex-page="crm"] .crm-askline{margin:14px 0 0;padding:14px 16px;border:1px solid #c9dcf5;border-radius:16px;background:#f5f9ff}
body.codex-ux[data-codex-page="crm"] .crm-askline__head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
body.codex-ux[data-codex-page="crm"] .crm-askline__head b{font-size:15px;color:var(--cx-ink)}
body.codex-ux[data-codex-page="crm"] .crm-askline__head span{font-size:12px;color:var(--cx-muted)}
body.codex-ux[data-codex-page="crm"] .crm-askline__form{display:flex;gap:8px}
body.codex-ux[data-codex-page="crm"] .crm-askline__form input{flex:1;min-width:0;height:44px;border:1px solid var(--cx-line);border-radius:12px;padding:0 14px;background:#fff;color:var(--cx-ink);font:inherit}
body.codex-ux[data-codex-page="crm"] .crm-askline__examples{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
body.codex-ux[data-codex-page="crm"] .crm-askline__examples button{min-height:32px;padding:5px 10px;border:1px solid #d8e5f3;border-radius:999px;background:#fff;color:#36536f;font:inherit;font-size:12px;cursor:pointer}
body.codex-ux[data-codex-page="crm"] .crm-askline__reply{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:11px 12px;border-radius:12px;background:#fff;border:1px solid #d8e5f3;color:var(--cx-ink)}
body.codex-ux[data-codex-page="crm"] .crm-askline__reply>div{display:grid;gap:2px;flex:1}
body.codex-ux[data-codex-page="crm"] .crm-askline__reply span{font-size:12px;color:var(--cx-muted);line-height:1.5}
@media(max-width:720px){body.codex-ux[data-codex-page="crm"] .crm-timebar{align-items:flex-start;flex-direction:column}.crm-askline__form{flex-direction:column}}

/* Sales: action first, analysis second, detailed rows last. */
body.codex-ux[data-codex-page="sales"] .v-kpi{min-height:108px}
body.codex-ux[data-codex-page="sales"] .v-bars__item,
body.codex-ux[data-codex-page="sales"] .v-spread__row,
body.codex-ux[data-codex-page="sales"] .v-funnel__row{min-height:44px}
body.codex-ux[data-codex-page="sales"] .v-tablecard{
  box-shadow:0 8px 26px rgba(29,55,91,.06);
}

/* The shell is a useful, honest starting point instead of an empty frame. */
body.codex-ux[data-codex-page="shell"] .page{padding:clamp(24px,4vw,56px)}
.codex-home{max-width:1120px;margin:0 auto}
.codex-home__hero{
  padding:clamp(24px,4vw,48px);
  border-radius:24px;
  color:#fff;
  background:#174d89;
  box-shadow:0 18px 48px rgba(16,45,82,.2);
}
.codex-home__eyebrow{margin:0 0 8px;font-size:13px;font-weight:700;color:#b9d7ff}
.codex-home__hero h1{margin:0;font-size:clamp(30px,5vw,52px);line-height:1.08}
.codex-home__hero p:last-child{max-width:610px;margin:12px 0 0;color:#e8f2ff;font-size:16px;line-height:1.65}
.codex-home__title{margin:28px 0 12px;font-size:20px;color:#17253a}
.codex-home__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.codex-home__card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:96px;
  padding:18px;
  color:#17253a;
  text-decoration:none;
  background:#fff;
  border:1px solid var(--cx-line);
  border-radius:18px;
  box-shadow:0 6px 18px rgba(29,55,91,.05);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.codex-home__card:hover{transform:translateY(-2px);border-color:#9dbde9;box-shadow:var(--cx-shadow)}
.codex-home__icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--cx-action-soft);color:var(--cx-action);font-size:20px}
.codex-home__text b{display:block;font-size:16px}
.codex-home__text small{display:block;margin-top:4px;color:#66758a;line-height:1.4}
.codex-home__go{color:var(--cx-action);font-size:18px}

@media (max-width:1180px) and (min-width:901px){
  body.codex-ux[data-codex-page="crm"] .v-crmgrid{grid-template-columns:220px minmax(0,1fr)}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__tasks{grid-column:1 / -1;grid-row:1}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__lists{grid-column:1;grid-row:2}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__main{grid-column:2;grid-row:2}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__panel{grid-column:1 / -1;grid-row:3;position:static}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__charts{grid-column:1 / -1;grid-row:4}
  .codex-home__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile is a separate composition: tasks, 2x2 KPIs, card lists and bottom navigation. */
@media (max-width:900px){
  /* _vswitch reserves 78px and then offsets the sticky header by another
     78px. In the isolated demo the switch is a single compact row, so the
     double offset created a large empty band before the page content. */
  body.codex-ux.has-vsw{padding-top:47px!important}
  body.codex-ux.has-vsw .v-top{
    position:relative;
    top:0!important;
  }
  body.codex-ux[data-codex-ops-page="planning"].has-vsw .v-top{
    height:56px!important;
    min-height:56px!important;
    padding-block:6px;
    flex-wrap:nowrap!important;
  }
  body.codex-ux[data-codex-ops-page="planning"].has-vsw .v-top__spacer{display:none!important}
  body.codex-ux.has-vsw .v-top .v-search{display:none}
  body.codex-ux[data-codex-ops-page="planning"].has-vsw .v-top .v-datepill{flex:1 1 auto;min-width:0}
  body.codex-ux .v-cover{height:168px}
  body.codex-ux .v-cover__in{padding-top:0}
  body.codex-ux{padding-bottom:max(74px,env(safe-area-inset-bottom))}
  body.codex-ux .v-wrap{padding-inline:14px}
  body.codex-ux :where(button,a,[role="button"],input,select){min-height:44px}
  body.codex-ux .v-card{border-radius:16px}
  body.codex-ux .v-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  body.codex-ux .v-kpis > .v-kpi:last-of-type:nth-of-type(odd){grid-column:auto}
  body.codex-ux .v-kpi{min-width:0;min-height:116px;padding:13px}
  body.codex-ux [data-component="ActionCenter"]{margin-top:14px!important}
  body.codex-ux .v-band.is-pairmobile{grid-template-columns:1fr;gap:12px}
  body.codex-ux .v-tablecard{overflow:visible}
  body.codex-ux .v-drawer{padding-bottom:env(safe-area-inset-bottom)}
  body.codex-ux[data-codex-page="crm"] .v-crmscope{width:100%;overflow-x:auto}
  body.codex-ux[data-codex-page="crm"] .v-crmscope .v-segment{min-width:max-content}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid{display:block;margin-top:14px}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid > * + *{margin-top:14px}
  body.codex-ux[data-codex-page="crm"] .v-crmgrid__panel{position:static}
  body.codex-ux[data-codex-page="sales"] .v-mhero{border-radius:0 0 20px 20px;overflow:hidden}
  body.codex-ux[data-codex-ops-page="planning"] .v-main__body > .v-kpi.v-only-mobile{display:none!important}
  body.codex-ux[data-codex-ops-page="planning"] .v-kpis > .v-kpi:nth-of-type(n+5){display:none}
  body.codex-ux[data-codex-page="shell"] .page{padding:18px 14px 90px}
  .codex-home__hero{padding:24px 20px;border-radius:20px}
  .codex-home__grid{grid-template-columns:1fr;gap:10px}
  .codex-home__card{min-height:82px;padding:14px}
}

@media (max-width:430px){
  body.codex-ux .v-wrap{padding-inline:12px}
  .codex-home__hero h1{font-size:32px}
  .codex-home__card{grid-template-columns:44px minmax(0,1fr) auto}
  .codex-home__icon{width:44px;height:44px}
}

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

/* Data cards are actions when they expose the exact population behind a signal. */
body.codex-ux button.v-stat{
  width:100%;border:0;font:inherit;color:inherit;cursor:pointer;text-align:inherit;
}
body.codex-ux .v-inscols>button{
  padding:0 12px;text-align:center;border:0;border-inline-start:var(--v-bw) solid var(--v-line);
  background:transparent;font:inherit;color:inherit;cursor:pointer;
}
body.codex-ux .v-inscols>button:first-child{border-inline-start:0}