/* Easivo Go UI refresh — visual hierarchy without changing product behavior. */
:root{
  --ui-canvas:#f5f7fb;
  --ui-surface:#fff;
  --ui-surface-subtle:#f8faff;
  --ui-border:#dce3ef;
  --ui-text:#182033;
  --ui-muted:#667085;
  --ui-primary:#315fd6;
  --ui-primary-strong:#244ab5;
  --ui-focus:#f4b740;
  --ui-shadow-sm:0 1px 2px rgba(16,24,40,.04),0 5px 16px rgba(16,24,40,.045);
  --ui-shadow-md:0 14px 36px rgba(16,24,40,.09);
}

body{background:var(--ui-canvas);color:var(--ui-text);text-rendering:optimizeLegibility}
.main{background:
  radial-gradient(circle at 96% 0,rgba(49,95,214,.055),transparent 26rem),
  var(--ui-canvas)}

/* Clear keyboard focus across native and custom controls. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--ui-focus) 72%,transparent)!important;
  outline-offset:2px!important;
}

/* Cards become quiet surfaces; elevation is reserved for interaction. */
.card,.settings-card,.agenda-team-filter,.agenda-filter,.finance-filter,.availability-card{
  border-color:var(--ui-border)!important;
  background:var(--ui-surface)!important;
  box-shadow:var(--ui-shadow-sm)!important;
}
button.card{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
button.card:hover{border-color:#bdc9dc!important;box-shadow:var(--ui-shadow-md)!important;transform:translateY(-1px)}
button.card:active{transform:translateY(0)}

/* Headings and metadata form a more legible rhythm. */
.topbar h1{letter-spacing:-.035em;line-height:1.08}
.topbar p{max-width:66ch;color:var(--ui-muted)}
.card-title h2,.settings-title h2{letter-spacing:-.02em}
.eyebrow,.section-kicker{letter-spacing:.115em!important}

/* Primary actions are recognizable without excessive glow. */
.btn:not(.ghost):not(.danger),button.primary{
  border-color:transparent!important;
  background:linear-gradient(180deg,#3d6dec 0,var(--ui-primary) 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(49,95,214,.2)!important;
}
.btn:not(.ghost):not(.danger):hover,button.primary:hover{
  background:linear-gradient(180deg,#3564df 0,var(--ui-primary-strong) 100%)!important;
  box-shadow:0 9px 20px rgba(49,95,214,.26)!important;
}
.btn.ghost{border-color:var(--ui-border)!important;background:var(--ui-surface)!important}

/* Dashboard: stronger summary, quieter secondary modules. */
.home-hero{
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.13)!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(244,183,64,.24),transparent 25%),
    linear-gradient(132deg,#16244a 0,#2853bd 58%,#3867f4 100%)!important;
  box-shadow:0 16px 38px rgba(30,55,118,.2)!important;
}
.home-hero:after{content:"";position:absolute;right:-54px;bottom:-80px;width:230px;height:230px;border:1px solid rgba(255,255,255,.12);border-radius:50%;pointer-events:none}
.home-hero>*{position:relative;z-index:1}
.home-metrics .card,.home-kpis article,.finance-kpis article,.client-summary article,.inventory-kpis article{
  border-top:3px solid color-mix(in srgb,var(--ui-primary) 26%,var(--ui-border))!important;
}
.home-metrics strong,.home-kpis strong,.finance-kpis strong,.client-summary strong{
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.home-content>.card{border-color:var(--ui-border)!important;background:rgba(255,255,255,.82)!important;box-shadow:var(--ui-shadow-sm)!important}

/* Lists scan as records rather than isolated floating tiles. */
.client-list,.services-list,.appointments-list{gap:8px!important}
.client-list>article,.services-list>article,.appointment{
  border-color:var(--ui-border)!important;
  transition:background .16s ease,border-color .16s ease;
}
.client-list>article:hover,.services-list>article:hover,.appointment:hover{
  border-color:#c6d1e2!important;background:var(--ui-surface-subtle)!important;
}
.client-avatar{box-shadow:inset 0 0 0 1px rgba(49,95,214,.1)}

/* Forms: consistent height, contrast and focus ownership. */
:where(input,select,textarea){border-color:#cfd8e7!important;background:#fff!important;color:var(--ui-text)!important}
:where(input,select,textarea):hover{border-color:#aebbd0!important}
:where(input,select,textarea):focus{border-color:var(--ui-primary)!important;box-shadow:0 0 0 3px rgba(49,95,214,.13)!important}
:where(input,select,textarea)::placeholder{color:#8994a8!important;opacity:1}

/* Navigation clearly communicates the current location. */
.sidebar button,.mobile-nav button{transition:background .16s ease,color .16s ease,transform .16s ease}
.sidebar button:hover{background:rgba(255,255,255,.075)}
.sidebar button.active{box-shadow:inset 3px 0 0 #f4b740}
.mobile-nav button.active{font-weight:850!important}

/* Status and empty states remain compact but easier to parse. */
.empty-state,.empty{border:1px dashed #cbd5e3!important;background:var(--ui-surface-subtle)!important}
.status,.badge{font-weight:800;letter-spacing:.005em}

@media(max-width:620px){
  .main{background:var(--ui-canvas)}
  .topbar h1{font-size:23px!important}
  .topbar p{font-size:11px!important}
  .home-hero{padding:19px 17px!important;border-radius:20px!important}
  .home-hero h2{font-size:24px!important;line-height:1.08!important}
  .home-hero-actions{width:100%}.home-hero-actions>.btn{flex:1;min-width:0}
  .home-metrics .card,.home-kpis article,.finance-kpis article,.client-summary article{border-top-width:2px!important}
  .mobile-nav{border-top:1px solid var(--ui-border)!important;box-shadow:0 -10px 28px rgba(16,24,40,.08)!important}
}

@media(min-width:901px){
  .main>*{max-width:1440px;margin-left:auto;margin-right:auto}
  .topbar{align-items:center}
}

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

body[data-theme="dark"]{
  --ui-canvas:#0b1220;--ui-surface:#111b2e;--ui-surface-subtle:#152137;
  --ui-border:#293750;--ui-text:#f4f7fc;--ui-muted:#a7b2c5;
}
body[data-theme="dark"] .main{background:radial-gradient(circle at 96% 0,rgba(72,112,224,.12),transparent 26rem),var(--ui-canvas)}
body[data-theme="dark"] :where(input,select,textarea){border-color:#34445f!important;background:#0f192a!important;color:#f4f7fc!important}
body[data-theme="dark"] .home-content>.card{background:rgba(17,27,46,.9)!important}
body[data-theme="dark"] .btn.ghost{background:#162238!important}
body[data-theme="dark"] .empty-state,body[data-theme="dark"] .empty{border-color:#34445f!important}