/* Fonely App Premium v4 — clean ivory sidebar */
:root{
  --fv4-cream:#f4ebe4;
  --fv4-cream-2:#efe1d6;
  --fv4-brown:#4a2d23;
  --fv4-brown-2:#5a392d;
  --fv4-muted:#8d7468;
  --fv4-line:rgba(74,45,35,.10);
  --fv4-peach:#d57c5b;
  --fv4-peach-soft:#f3d8cb;
}

/* Cleaner sidebar: flatter, lighter and more premium */
.layout>aside{
  background:
    linear-gradient(180deg,#f7efe9 0%,var(--fv4-cream) 58%,var(--fv4-cream-2) 100%)!important;
  border-right:1px solid var(--fv4-line)!important;
  box-shadow:8px 0 28px rgba(63,39,30,.055)!important;
  padding:18px 14px 16px!important;
}

.layout>aside .brand{
  min-height:100px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 4px 14px!important;
  padding:7px 8px 20px!important;
  border-bottom:1px solid var(--fv4-line)!important;
}

.layout>aside .fonely-official-logo{
  width:158px!important;
  max-width:158px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}

/* Navigation */
.layout nav{
  gap:6px!important;
}

.layout nav button{
  min-height:48px!important;
  padding:6px 9px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:transparent!important;
  color:#73594e!important;
  font-size:11px!important;
  font-weight:780!important;
  box-shadow:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}

.layout nav button i{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  margin-right:10px!important;
  border:1px solid rgba(74,45,35,.075)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.44)!important;
  color:#6d4b3e!important;
  box-shadow:none!important;
}

.layout nav button:hover{
  transform:translateX(2px)!important;
  background:rgba(255,255,255,.44)!important;
  border-color:rgba(74,45,35,.07)!important;
  color:#4d3026!important;
}

.layout nav button.active{
  background:var(--fv4-brown)!important;
  border-color:var(--fv4-brown)!important;
  color:#fffaf7!important;
  box-shadow:0 9px 20px rgba(74,45,35,.16)!important;
}

.layout nav button.active:before{
  display:none!important;
}

.layout nav button.active i{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#ffd2be!important;
}

.layout nav em{
  margin-left:auto!important;
  padding:4px 7px!important;
  border:0!important;
  border-radius:999px!important;
  background:#ead1c4!important;
  color:#88513c!important;
  font-size:6px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
}

.layout nav button.active em{
  background:rgba(255,255,255,.13)!important;
  color:#ffd6c5!important;
}

/* footer label */
.layout>aside:after{
  margin:22px 10px 0!important;
  padding-top:16px!important;
  border-top:1px solid var(--fv4-line)!important;
  color:#a0867a!important;
  font-size:6px!important;
  letter-spacing:.17em!important;
}

/* Main area: less beige, more neutral so sidebar reads as intentional */
body{
  background:#f8f6f3!important;
}

.layout>main{
  background:transparent!important;
}

.layout>main>header{
  border-bottom-color:rgba(74,45,35,.075)!important;
}

/* cards: white, restrained */
.panel,
.fhome-agenda,
.fhome-patients,
.fhome-alerts,
.fhome-stat,
.top-account{
  background:#fff!important;
  border-color:rgba(74,45,35,.075)!important;
  box-shadow:0 6px 18px rgba(63,39,30,.028)!important;
}

.fhome-welcome{
  background:
    radial-gradient(circle at 92% 0%,rgba(213,124,91,.065),transparent 27%),
    #fff!important;
  border-color:rgba(74,45,35,.08)!important;
  box-shadow:0 8px 24px rgba(63,39,30,.035)!important;
}

.fhome-welcome .primary,
.primary{
  background:var(--fv4-brown)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(74,45,35,.16)!important;
}

.fhome-secondary,
.soft-btn,
.icon-btn{
  background:#fff!important;
  border-color:rgba(74,45,35,.10)!important;
  color:var(--fv4-brown)!important;
}

@media(max-width:900px){
  .layout>aside{
    background:linear-gradient(180deg,#f7efe9,#f0e2d7)!important;
    padding:14px!important;
  }

  .layout>aside .brand{
    min-height:76px!important;
    justify-content:flex-start!important;
    padding:4px 4px 14px!important;
  }

  .layout>aside .fonely-official-logo{
    width:142px!important;
    max-width:142px!important;
  }

  .layout nav button{
    background:rgba(255,255,255,.30)!important;
    border-color:rgba(74,45,35,.055)!important;
  }

  .layout nav button.active{
    background:var(--fv4-brown)!important;
    border-color:var(--fv4-brown)!important;
  }
}